77 lines
2.2 KiB
TypeScript
77 lines
2.2 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
import { CT, CP } from "@/components/Texts";
|
|
import React from 'react';
|
|
import { motion } from 'framer-motion';
|
|
|
|
export const BentoGrid = ({
|
|
className,
|
|
children,
|
|
}: {
|
|
className?: string;
|
|
children?: React.ReactNode;
|
|
}) => {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"mx-4 grid max-w-6xl grid-cols-1 gap-4 lg:grid-cols-3",
|
|
className,
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
interface BentoGridItemProps {
|
|
className?: string;
|
|
title?: string | React.ReactNode;
|
|
subtitle?: string | React.ReactNode;
|
|
description?: string | React.ReactNode;
|
|
img?: string;
|
|
video?: string;
|
|
rowHeight?: string;
|
|
}
|
|
|
|
export const BentoGridItem = React.forwardRef<HTMLDivElement, BentoGridItemProps>(
|
|
({ className, title, subtitle, description, img, video, rowHeight }, ref) => {
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={cn(
|
|
"group/bento shadow-input row-span-1 flex flex-col justify-between rounded-xl border border-black bg-black/10 backdrop-blur-md transition-all duration-300 ease-in-out hover:scale-105 hover:border-black hover:bg-black/40",
|
|
rowHeight ? rowHeight : "h-full",
|
|
className
|
|
)}
|
|
>
|
|
<div className="relative w-full h-[65%] min-h-[6rem] bg-transparent overflow-hidden">
|
|
{video ? (
|
|
<video
|
|
src={video}
|
|
autoPlay
|
|
loop
|
|
muted
|
|
playsInline
|
|
className="w-full h-full object-cover opacity-90 group-hover/bento:opacity-100 transition-opacity duration-300"
|
|
/>
|
|
) : img ? (
|
|
<img
|
|
src={img}
|
|
alt={title as string}
|
|
className="w-full h-full object-cover opacity-90 group-hover/bento:opacity-100 transition-opacity duration-300"
|
|
/>
|
|
) : null}
|
|
</div>
|
|
<div className="p-4 transition bg-white/5 hover:bg-white/7 backdrop-blur-md duration-200 group-hover/bento:translate-x-2 ">
|
|
<CT>{title}</CT>
|
|
<CP className="font-medium">{subtitle}</CP>
|
|
<CP className="mt-2">{description}</CP>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
BentoGridItem.displayName = "BentoGridItem";
|
|
|
|
export const MotionBentoGridItem = motion(BentoGridItem);
|