Spaces:
Paused
Paused
File size: 2,610 Bytes
d530f14 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | "use client";
import { AnimatePresence, cubicBezier, motion } from "motion/react";
import { useState } from "react";
import {
ConnectorToLeft,
ConnectorToRight,
} from "@/components/shared/layout/curvy-rect";
import { NAV_ITEMS } from "@/components/shared/header/Nav/Nav";
import { cn } from "@/utils/cn";
export default function HeaderDropdownMobileItem({
item,
}: {
item: (typeof NAV_ITEMS)[number];
}) {
const [open, setOpen] = useState(false);
return (
<>
<a
className="p-24 flex group relative"
href={item.href}
onClick={() => {
setOpen((v) => !v);
}}
>
<div className="h-1 bottom-0 absolute left-0 w-full bg-border-faint" />
<ConnectorToRight className="-top-11 left-0" />
<ConnectorToRight className="-bottom-10 left-0" />
<ConnectorToLeft className="-top-11 right-0" />
<ConnectorToLeft className="-bottom-10 right-0" />
<span className="px-4 flex-1 text-label-medium text-accent-black">
{item.label}
</span>
{item.dropdown && (
<svg
className={cn(
"transition-all duration-200",
open ? "rotate-180 text-accent-black" : "text-black-alpha-48",
)}
fill="none"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.4001 10.2L12.0001 13.8L15.6001 10.2"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.25"
/>
</svg>
)}
</a>
<AnimatePresence>
{open && (
<motion.div
animate={{ height: "auto", opacity: 1, filter: "blur(0px)" }}
className="overflow-hidden"
exit={{ height: 0, opacity: 0, filter: "blur(4px)" }}
initial={{ height: 0, opacity: 0, filter: "blur(4px)" }}
transition={{ duration: 0.3, ease: cubicBezier(0.4, 0, 0.2, 1) }}
>
{item.dropdown}
<div className="h-44 relative">
<ConnectorToRight className="-top-11 left-0" />
<ConnectorToRight className="-bottom-10 left-0" />
<ConnectorToLeft className="-top-11 right-0" />
<ConnectorToLeft className="-bottom-10 right-0" />
<div className="h-1 bottom-0 absolute left-0 w-full bg-border-faint" />
</div>
</motion.div>
)}
</AnimatePresence>
</>
);
}
|