chore: Update Invest page with additional carousel and tab functionality

This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB 2024-08-31 16:10:19 +07:00
parent 612d99a236
commit dfe72a55f0

View File

@ -17,13 +17,18 @@ import { Button } from "@/components/ui/button";
export default function Invest() {
const [progress, setProgress] = useState(0);
const [tab, setTab] = useState("");
const handleClick = (item: string) => {
setTab(item);
};
useEffect(() => {
// percent success
const timer = setTimeout(() => setProgress(66), 500);
return () => clearTimeout(timer);
}, []);
return (
<div className="w-[90%] h-[500px]-500 ml-32 mt-12">
<div>
<div className="w-[90%] h-[500px]-500 m-auto mt-12 bg-red-500">
<div>
<div className="flex">
<Image src="./logo.svg" alt="logo" width={50} height={50} />
@ -103,5 +108,38 @@ export default function Invest() {
</CarouselContent>
</Carousel>
</div>
<div className="flex w-[90%] mt-5 m-auto">
<ul className="list-none flex gap-10">
<li>
<a
onClick={() => handleClick("Pitch")}
className={tab === "Pitch" ? "text-blue-600" : ""}
>
Pitch
</a>
</li>
<li>
<a
onClick={() => handleClick("General Data")}
className={
tab === "General Data" ? "text-blue-600" : ""
}
>
General Data
</a>
</li>
<li>
<a
onClick={() => handleClick("Updates")}
className={
tab === "Updates" ? "text-blue-600" : ""
}
>
Updates
</a>
</li>
</ul>
</div>
</div>
);
}