Developers Digest
92 lines
2.4 KiB
TypeScript
92 lines
2.4 KiB
TypeScript
import { ArrowUpRight } from "lucide-react";
|
|
import { cn } from "@/utils/cn";
|
|
|
|
export interface NavItemRowProps {
|
|
icon: React.ReactNode;
|
|
label: string;
|
|
description: string;
|
|
href: string;
|
|
target?: string;
|
|
iconClassName?: string;
|
|
className?: string;
|
|
}
|
|
|
|
export function NavItemRow({
|
|
icon,
|
|
label,
|
|
description,
|
|
href,
|
|
target,
|
|
iconClassName,
|
|
className,
|
|
}: NavItemRowProps) {
|
|
return (
|
|
<a
|
|
className={cn(
|
|
"flex items-start gap-16 py-16 pl-24 lg-max:[&_svg]:size-24 lg:pl-44 group border-x hover:bg-black-alpha-2 border-b border-border-faint transition-all hover:text-heat-100",
|
|
className,
|
|
)}
|
|
href={href}
|
|
target={target}
|
|
>
|
|
<div className={iconClassName}>{icon}</div>
|
|
|
|
<div className="min-w-0 flex-1">
|
|
<div className="text-label-medium">{label}</div>
|
|
|
|
<div className="text-body-medium mt-4 text-black-alpha-64 lg-max:hidden">
|
|
{description}
|
|
</div>
|
|
</div>
|
|
</a>
|
|
);
|
|
}
|
|
|
|
export interface NavItemRowBigProps extends Omit<NavItemRowProps, "target"> {
|
|
ctas?: { label: string; href: string; target?: string }[];
|
|
}
|
|
|
|
export function NavItemRowBig({
|
|
icon,
|
|
label,
|
|
description,
|
|
href,
|
|
iconClassName,
|
|
ctas,
|
|
}: NavItemRowBigProps) {
|
|
return (
|
|
<div className="flex items-start gap-16 py-22 pl-24 lg-max:[&_svg]:size-24 lg:pl-44 group border-x border-b transition-colors border-border-faint">
|
|
<div className={iconClassName}>{icon}</div>
|
|
|
|
<div className="min-w-0 flex-1">
|
|
<a
|
|
href={href}
|
|
className="text-label-medium inline-block hover:text-heat-100 transition-colors"
|
|
>
|
|
{label}
|
|
</a>
|
|
|
|
<div className="text-body-medium mt-4 text-black-alpha-64 lg-max:hidden">
|
|
{description}
|
|
</div>
|
|
|
|
{ctas && ctas.length > 0 && (
|
|
<div className="mt-12 flex items-center gap-8 lg-max:hidden">
|
|
{ctas.map((cta) => (
|
|
<a
|
|
key={cta.label}
|
|
href={cta.href}
|
|
target={cta.target}
|
|
className="inline-flex items-center gap-6 px-12 py-6 rounded-6 text-label-small text-heat-100 bg-heat-4 hover:bg-heat-8 transition-colors whitespace-nowrap shrink-0"
|
|
>
|
|
<span>{cta.label}</span>
|
|
<ArrowUpRight className="size-14" aria-hidden="true" />
|
|
</a>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|