Scribd
Upload
2 views

www.TechTools.NET

The document is a React component named 'Archive' that allows users to select an archive platform from a list of options, each represented by an icon. It includes a description of the purpose of the platform selection and utilizes state management to highlight the active platform. Additionally, there is a request to enhance the component by adding a chart at the bottom of the cards to display daily, weekly, and monthly archive data, along with a progressive bar on the right side for better design and functionality.

Uploaded by

jomarroxas10
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views

www.TechTools.NET

The document is a React component named 'Archive' that allows users to select an archive platform from a list of options, each represented by an icon. It includes a description of the purpose of the platform selection and utilizes state management to highlight the active platform. Additionally, there is a request to enhance the component by adding a chart at the bottom of the cards to display daily, weekly, and monthly archive data, along with a progressive bar on the right side for better design and functionality.

Uploaded by

jomarroxas10
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

import React, { useState } from "react";

import {
FaUsers,
FaBriefcase,
FaUserCircle,
FaAngleDown,
} from "react-icons/fa";

function Archive() {
const [activeIndex, setActiveIndex] = useState(null);

const platforms = [
{
name: "Units and Personnel",
icon: <FaUsers size={24} color="#ffffff" />,
},
{ name: "Case Fields", icon: <FaBriefcase size={24} color="#ffffff" /> },
{
name: "Users Accounts",
icon: <FaUserCircle size={24} color="#ffffff" />,
},
{ name: "drop down", icon: <FaAngleDown size={24} color="#ffffff" /> },
];

return (
<div className="px-[40px] mt-[40px] w-full">
<div className="flex flex-col space-y-2 w-[70%]">
<h1 className="text-[24px] font-poppins font-regular">
Select Archive Platform
</h1>
<p className="font-poppins text-[12px] text-[#757575]">
Choose a platform to view archived records. Each platform contains
specific archived data related to units, cases, user accounts, or
dropdown configurations.
</p>
</div>

<div className="flex flex-row items-start w-full gap-4 mt-[30px]">


{platforms.map((platform, index) => (
<div
key={index}
className={`flex items-center min-w-[20%] bg-white border rounded-[5px]
shadow-sm p-4 hover:shadow-md transition-all duration-300 cursor-pointer
${
activeIndex === index
? "border-[#E3373B] shadow-lg"
: "border-[#DBDBDB] hover:border-[#E3373B]"
}`}
onClick={() => setActiveIndex(index)}
>
<div className="mr-4 bg-[#E3373B] rounded-[5px]">
<div className="h-[40px] w-[40px] p-3 flex items-center justify-
center">
{platform.icon}
</div>
</div>
<div className="flex flex-col items-start space-y-[-5px]">
<p className="font-poppins text-[14px] font-medium text-[#333]">
{platform.name}
</p>
<div className="flex-shrink-0">
<a
href="#"
className="font-poppins text-[12px] text-[#F2994A] hover:text-
[#D88A40] transition-colors"
>
View Platform
</a>
</div>
</div>
</div>
))}
</div>
</div>
);
}

export default Archive;

CAN YOU ADD A CHART IN THE BOTTOM OF THE CARDS? WITH DATA OF DAILY, WEEKLY, MONTHLY

WITH TOTAL ARCHIVE DATA AND ADD A PROGRESSIVE BAR IN THE RIGHT SIDE.

DESIGN IT PROPERLY

THE DAILY,WEEKLY AND MONTHLY IS FILTER

You might also like