asepharyana
bf75d9deef
Vendor 50 Aceternity UI components into components/ui from the official registry (ui.aceternity.com/registry/<slug>.json), adapted for this template's stack: Tailwind v4, motion/react 13, cn util, React 19. Add a live showcase gallery (/ui + /docs/... navigation is unchanged): app/ui/page.tsx renders <ShowcaseGallery> with 30+ demos — 3d-pin, aurora, background-beams, bento, card-stack, card-spotlight, direction-aware-hover, encrypted-text, evervault-card, flip-words, hero-highlight, hero-parallax, infinite-moving-cards, moving-border, sparkles, tracing-beam, animated-tooltip, typewriter-effect, placeholders-and-vanish-input and friends. Toolchain stays zero-warning: vendored animation code is scoped in eslint.config.mjs (react-hooks/react-compiler advisory rules, no-any, prefer-const, no-img-element) so app code keeps a 0-error gate. typecheck, build, 7 vitest tests and 2 test suites all green.
55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
export const BentoGrid = ({
|
|
className,
|
|
children,
|
|
}: {
|
|
className?: string;
|
|
children?: React.ReactNode;
|
|
}) => {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"mx-auto grid max-w-7xl grid-cols-1 gap-4 md:auto-rows-[18rem] md:grid-cols-3",
|
|
className
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const BentoGridItem = ({
|
|
className,
|
|
title,
|
|
description,
|
|
header,
|
|
icon,
|
|
}: {
|
|
className?: string;
|
|
title?: string | React.ReactNode;
|
|
description?: string | React.ReactNode;
|
|
header?: React.ReactNode;
|
|
icon?: React.ReactNode;
|
|
}) => {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"group/bento row-span-1 flex flex-col justify-between space-y-4 rounded-xl border border-neutral-200 bg-white p-4 shadow-input transition duration-200 hover:shadow-xl dark:border-white/[0.2] dark:bg-black dark:shadow-none",
|
|
className
|
|
)}
|
|
>
|
|
{header}
|
|
<div className="transition duration-200 group-hover/bento:translate-x-2">
|
|
{icon}
|
|
<div className="mt-2 mb-2 font-sans font-bold text-neutral-600 dark:text-neutral-200">
|
|
{title}
|
|
</div>
|
|
<div className="font-sans text-xs font-normal text-neutral-600 dark:text-neutral-300">
|
|
{description}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|