35 lines
1.4 KiB
TypeScript
35 lines
1.4 KiB
TypeScript
import { Link } from "@/components/common/Link";
|
|
import { Icon } from "@syntax/Icon";
|
|
|
|
export function QuickLinks({ children }: { children: React.ReactNode }) {
|
|
return <div className="not-prose my-12 grid grid-cols-1 gap-6 sm:grid-cols-2">{children}</div>;
|
|
}
|
|
|
|
export function QuickLink({
|
|
title,
|
|
description,
|
|
href,
|
|
icon,
|
|
}: {
|
|
title: string;
|
|
description: string;
|
|
href: string;
|
|
icon: React.ComponentProps<typeof Icon>["icon"];
|
|
}) {
|
|
return (
|
|
<div className="group relative rounded-xl border border-slate-200 dark:border-slate-800">
|
|
<div className="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,var(--color-violet-50)),var(--quick-links-hover-bg,var(--color-violet-50)))_padding-box,linear-gradient(to_top,var(--color-indigo-400),var(--color-cyan-400),var(--color-violet-500))_border-box] group-hover:opacity-100 dark:[--quick-links-hover-bg:var(--color-slate-800)]" />
|
|
<div className="relative overflow-hidden rounded-xl p-6">
|
|
<Icon icon={icon} className="h-8 w-8" />
|
|
<h2 className="mt-4 font-display text-base text-slate-900 dark:text-white">
|
|
<Link href={href}>
|
|
<span className="absolute -inset-px rounded-xl" />
|
|
{title}
|
|
</Link>
|
|
</h2>
|
|
<p className="mt-1 text-sm text-slate-700 dark:text-slate-400">{description}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|