bento-grid

1import { CalendarIcon, FileTextIcon } from "@radix-ui/react-icons";
2import { BellIcon, Share2Icon } from "lucide-react";
3 
4import { Calendar } from "@/components/ui/calendar";
5import { cn } from "@/lib/utils";
6import AnimatedBeamMultipleOutputDemo from "@/components/example/animated-beam-multiple-outputs";
7import AnimatedListDemo from "@/components/example/animated-list-demo";
8import { BentoCard, BentoGrid } from "@/components/magicui/bento-grid";
9import { Marquee } from "@/components/magicui/marquee";
10 
11const files = [
12  {
13    name: "bitcoin.pdf",
14    body: "Bitcoin is a cryptocurrency invented in 2008 by an unknown person or group of people using the name Satoshi Nakamoto.",
15  },
16  {
17    name: "finances.xlsx",
18    body: "A spreadsheet or worksheet is a file made of rows and columns that help sort data, arrange data easily, and calculate numerical data.",
19  },
20  {
21    name: "logo.svg",
22    body: "Scalable Vector Graphics is an Extensible Markup Language-based vector image format for two-dimensional graphics with support for interactivity and animation.",
23  },
24  {
25    name: "keys.gpg",
26    body: "GPG keys are used to encrypt and decrypt email, files, directories, and whole disk partitions and to authenticate messages.",
27  },
28  {
29    name: "seed.txt",
30    body: "A seed phrase, seed recovery phrase or backup seed phrase is a list of words which store all the information needed to recover Bitcoin funds on-chain.",
31  },
32];
33 
34const features = [
35  {
36    Icon: FileTextIcon,
37    name: "Save your files",
38    description: "We automatically save your files as you type.",
39    href: "#",
40    cta: "Learn more",
41    className: "col-span-3 lg:col-span-1",
42    background: (
43      <Marquee
44        pauseOnHover
45        className="absolute top-10 [--duration:20s] [mask-image:linear-gradient(to_top,transparent_40%,#000_100%)] "
46      >
47        {files.map((f, idx) => (
48          <figure
49            key={idx}
50            className={cn(
51              "relative w-32 cursor-pointer overflow-hidden rounded-xl border p-4",
52              "border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]",
53              "dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]",
54              "transform-gpu blur-[1px] transition-all duration-300 ease-out hover:blur-none",
55            )}
56          >
57            <div className="flex flex-row items-center gap-2">
58              <div className="flex flex-col">
59                <figcaption className="text-sm font-medium dark:text-white ">
60                  {f.name}
61                </figcaption>
62              </div>
63            </div>
64            <blockquote className="mt-2 text-xs">{f.body}</blockquote>
65          </figure>
66        ))}
67      </Marquee>
68    ),
69  },
70  {
71    Icon: BellIcon,
72    name: "Notifications",
73    description: "Get notified when something happens.",
74    href: "#",
75    cta: "Learn more",
76    className: "col-span-3 lg:col-span-2",
77    background: (
78      <AnimatedListDemo className="absolute right-2 top-4 h-[300px] w-full border-none transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_10%,#000_100%)] group-hover:scale-105" />
79    ),
80  },
81  {
82    Icon: Share2Icon,
83    name: "Integrations",
84    description: "Supports 100+ integrations and counting.",
85    href: "#",
86    cta: "Learn more",
87    className: "col-span-3 lg:col-span-2",
88    background: (
89      <AnimatedBeamMultipleOutputDemo className="absolute right-2 top-4 h-[300px] border-none transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_10%,#000_100%)] group-hover:scale-105" />
90    ),
91  },
92  {
93    Icon: CalendarIcon,
94    name: "Calendar",
95    description: "Use the calendar to filter your files by date.",
96    className: "col-span-3 lg:col-span-1",
97    href: "#",
98    cta: "Learn more",
99    background: (
100      <Calendar
101        mode="single"
102        selected={new Date(2022, 4, 11, 0, 0, 0)}
103        className="absolute right-0 top-10 origin-top rounded-md border transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_40%,#000_100%)] group-hover:scale-105"
104      />
105    ),
106  },
107];
108 
109export function BentoDemo() {
110  return (
111    <BentoGrid>
112      {features.map((feature, idx) => (
113        <BentoCard key={idx} {...feature} />
114      ))}
115    </BentoGrid>
116  );
117}