Developers Digest
50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
import { Fragment } from "react";
|
|
|
|
import Button from "@/components/ui/shadcn/button";
|
|
import {
|
|
ConnectorToBottom,
|
|
ConnectorToLeft,
|
|
ConnectorToRight,
|
|
} from "@/components/shared/layout/curvy-rect";
|
|
import HeaderGithubClient from "@/components/shared/header/Github/GithubClient";
|
|
import { NAV_ITEMS } from "@/components/shared/header/Nav/Nav";
|
|
|
|
import HeaderDropdownMobileItem from "./Item/Item";
|
|
import Link from "next/link";
|
|
|
|
export default function HeaderDropdownMobile({
|
|
ctaHref = "/signin/signup",
|
|
ctaLabel = "Sign up",
|
|
}: {
|
|
ctaHref?: string;
|
|
ctaLabel?: string;
|
|
}) {
|
|
return (
|
|
<div className="container relative">
|
|
<div className="overlay border-x pointer-events-none border-border-faint" />
|
|
<ConnectorToBottom className="-top-1 -left-10" />
|
|
<ConnectorToBottom className="-top-1 -right-10" />
|
|
|
|
<div>
|
|
{NAV_ITEMS.map((item) => (
|
|
<Fragment key={item.label}>
|
|
<HeaderDropdownMobileItem item={item} />
|
|
</Fragment>
|
|
))}
|
|
</div>
|
|
|
|
<div className="p-24 flex flex-col gap-8 border-b border-border-faint relative -mt-1">
|
|
<HeaderGithubClient />
|
|
<Link href={ctaHref}>
|
|
<Button variant="secondary"> {ctaLabel} </Button>
|
|
</Link>
|
|
|
|
<ConnectorToRight className="left-0 -bottom-11" />
|
|
<ConnectorToLeft className="right-0 -bottom-11" />
|
|
</div>
|
|
|
|
<div className="h-36" />
|
|
</div>
|
|
);
|
|
}
|