info-card-demo

1import {
2  InfoCard,
3  InfoCardContent,
4  InfoCardTitle,
5  InfoCardDescription,
6  InfoCardMedia,
7  InfoCardFooter,
8  InfoCardDismiss,
9  InfoCardAction,
10} from "@/components/kl-ui/info-card";
11import {
12  Sidebar,
13  SidebarProvider,
14  SidebarContent,
15  SidebarGroup,
16  SidebarGroupLabel,
17  SidebarGroupContent,
18  SidebarMenu,
19  SidebarMenuItem,
20  SidebarMenuButton,
21  SidebarFooter,
22  SidebarTrigger,
23} from "@/components/ui/sidebar";
24import {
25  ExternalLink,
26  User,
27  ChevronsUpDown,
28  Calendar,
29  Home,
30  Inbox,
31  Search,
32  Settings,
33} from "lucide-react";
34import Link from "next/link";
35 
36// Menu items.
37const items = [
38  {
39    title: "Home",
40    url: "#",
41    icon: Home,
42  },
43  {
44    title: "Inbox",
45    url: "#",
46    icon: Inbox,
47  },
48  {
49    title: "Calendar",
50    url: "#",
51    icon: Calendar,
52  },
53  {
54    title: "Search",
55    url: "#",
56    icon: Search,
57  },
58  {
59    title: "Settings",
60    url: "#",
61    icon: Settings,
62  },
63];
64 
65export function InfoCardDemo() {
66  return (
67    <SidebarProvider>
68      <Sidebar>
69        <SidebarContent>
70          <SidebarGroup>
71            <SidebarGroupLabel>Application</SidebarGroupLabel>
72            <SidebarGroupContent>
73              <SidebarMenu>
74                {items.map((item) => (
75                  <SidebarMenuItem key={item.title}>
76                    <SidebarMenuButton asChild>
77                      <a href={item.url}>
78                        <item.icon />
79                        <span>{item.title}</span>
80                      </a>
81                    </SidebarMenuButton>
82                  </SidebarMenuItem>
83                ))}
84              </SidebarMenu>
85            </SidebarGroupContent>
86          </SidebarGroup>
87        </SidebarContent>
88        <SidebarFooter>
89          <InfoCard>
90            <InfoCardContent>
91              <InfoCardTitle>Introducing New Dashboard</InfoCardTitle>
92              <InfoCardDescription>
93                New Feature. New Platform. Same Feel.
94              </InfoCardDescription>
95              <InfoCardMedia
96                media={[
97                  {
98                    src: "https://cd-misc.s3.us-east-2.amazonaws.com/sidebar/third.webp",
99                  },
100                  {
101                    src: "https://cd-misc.s3.us-east-2.amazonaws.com/sidebar/second.webp",
102                  },
103                  {
104                    src: "https://cd-misc.s3.us-east-2.amazonaws.com/sidebar/first.webp",
105                  },
106                ]}
107              />
108              <InfoCardFooter>
109// … truncated