[V0_FILE]typescriptreact:file="ui/button.tsx" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, } ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return ( ) } ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="ui/separator.tsx" isMerged="true" "use client" import * as React from "react" import * as SeparatorPrimitive from "@radix-ui/react-separator" import { cn } from "@/lib/utils" const Separator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >( ( { className, orientation = "horizontal", decorative = true, ...props }, ref ) => ( ) ) Separator.displayName = SeparatorPrimitive.Root.displayName export { Separator } [V0_FILE]typescriptreact:file="ui/sheet.tsx" isMerged="true" "use client" import * as React from "react" import * as SheetPrimitive from "@radix-ui/react-dialog" import { cva, type VariantProps } from "class-variance-authority" import { X } from "lucide-react" import { cn } from "@/lib/utils" const Sheet = SheetPrimitive.Root const SheetTrigger = SheetPrimitive.Trigger const SheetClose = SheetPrimitive.Close const SheetPortal = SheetPrimitive.Portal const SheetOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SheetOverlay.displayName = SheetPrimitive.Overlay.displayName const sheetVariants = cva( "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500", { variants: { side: { top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top", bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom", left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm", right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm", }, }, defaultVariants: { side: "right", }, } ) interface SheetContentProps extends React.ComponentPropsWithoutRef, VariantProps {} const SheetContent = React.forwardRef< React.ElementRef, SheetContentProps >(({ side = "right", className, children, ...props }, ref) => ( {children} Close )) SheetContent.displayName = SheetPrimitive.Content.displayName const SheetHeader = ({ className, ...props }: React.HTMLAttributes) => (

) SheetHeader.displayName = "SheetHeader" const SheetFooter = ({ className, ...props }: React.HTMLAttributes) => (

) SheetFooter.displayName = "SheetFooter" const SheetTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SheetTitle.displayName = SheetPrimitive.Title.displayName const SheetDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SheetDescription.displayName = SheetPrimitive.Description.displayName export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, } [V0_FILE]typescriptreact:file="ui/tooltip.tsx" isMerged="true" "use client" import * as React from "react" import * as TooltipPrimitive from "@radix-ui/react-tooltip" import { cn } from "@/lib/utils" const TooltipProvider = TooltipPrimitive.Provider const Tooltip = TooltipPrimitive.Root const TooltipTrigger = TooltipPrimitive.Trigger const TooltipContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, sideOffset = 4, ...props }, ref) => ( )) TooltipContent.displayName = TooltipPrimitive.Content.displayName export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } [V0_FILE]typescriptreact:file="ui/input.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" const Input = React.forwardRef>( ({ className, type, ...props }, ref) => { return ( ) } ) Input.displayName = "Input" export { Input } [V0_FILE]typescriptreact:file="hooks/use-mobile.tsx" isMerged="true" import * as React from "react" const MOBILE_BREAKPOINT = 768 export function useIsMobile() { const [isMobile, setIsMobile] = React.useState(undefined) React.useEffect(() => { const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`) const onChange = () => { setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) } mql.addEventListener("change", onChange) setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) return () => mql.removeEventListener("change", onChange) }, []) return !!isMobile } [V0_FILE]typescriptreact:file="ui/skeleton.tsx" isMerged="true" import { cn } from "@/lib/utils" function Skeleton({ className, ...props }: React.HTMLAttributes) { return (

) } export { Skeleton } [V0_FILE]typescriptreact:file="ui/breadcrumb.tsx" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { ChevronRight, MoreHorizontal } from "lucide-react" import { cn } from "@/lib/utils" const Breadcrumb = React.forwardRef< HTMLElement, React.ComponentPropsWithoutRef<"nav"> & { separator?: React.ReactNode } >(({ ...props }, ref) =>

) Breadcrumb.displayName = "Breadcrumb" const BreadcrumbList = React.forwardRef< HTMLOListElement, React.ComponentPropsWithoutRef<"ol"> >(({ className, ...props }, ref) => (

)) BreadcrumbItem.displayName = "BreadcrumbItem" const BreadcrumbLink = React.forwardRef< HTMLAnchorElement, React.ComponentPropsWithoutRef<"a"> & { asChild?: boolean } >(({ asChild, className, ...props }, ref) => { const Comp = asChild ? Slot : "a" return ( ) }) BreadcrumbLink.displayName = "BreadcrumbLink" const BreadcrumbPage = React.forwardRef< HTMLSpanElement, React.ComponentPropsWithoutRef<"span"> >(({ className, ...props }, ref) => ( )) BreadcrumbPage.displayName = "BreadcrumbPage" const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
svg]:w-3.5 [&>svg]:h-3.5", className)} {...props} > {children ?? }

, React.ComponentPropsWithoutRef & { inset?: boolean } >(({ className, inset, children, ...props }, ref) => ( {children} )) DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName const DropdownMenuSubContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName const DropdownMenuContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, sideOffset = 4, ...props }, ref) => ( )) DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName const DropdownMenuItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { inset?: boolean } >(({ className, inset, ...props }, ref) => ( )) DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName const DropdownMenuCheckboxItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, checked, ...props }, ref) => ( {children} )) DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName const DropdownMenuRadioItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName const DropdownMenuLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { inset?: boolean } >(({ className, inset, ...props }, ref) => ( )) DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName const DropdownMenuSeparator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes) => { return ( ) } DropdownMenuShortcut.displayName = "DropdownMenuShortcut" export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, } [V0_FILE]typescriptreact:file="ui/avatar.tsx" isMerged="true" "use client" import * as React from "react" import * as AvatarPrimitive from "@radix-ui/react-avatar" import { cn } from "@/lib/utils" const Avatar = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Avatar.displayName = AvatarPrimitive.Root.displayName const AvatarImage = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarImage.displayName = AvatarPrimitive.Image.displayName const AvatarFallback = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName export { Avatar, AvatarImage, AvatarFallback } [V0_FILE]typescriptreact:file="ui/sidebar.tsx" isMerged="true" "use client" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { PanelLeft } from "lucide-react" import { useIsMobile } from '@/hooks/use-mobile' import { cn } from '@/lib/utils' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Separator } from '@/components/ui/separator' import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, } from '@/components/ui/sheet' import { Skeleton } from '@/components/ui/skeleton' import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from '@/components/ui/tooltip' const SIDEBAR_COOKIE_NAME = "sidebar_state" const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7 const SIDEBAR_WIDTH = "16rem" const SIDEBAR_WIDTH_MOBILE = "18rem" const SIDEBAR_WIDTH_ICON = "3rem" const SIDEBAR_KEYBOARD_SHORTCUT = "b" type SidebarContextProps = { state: "expanded" | "collapsed" open: boolean setOpen: (open: boolean) => void openMobile: boolean setOpenMobile: (open: boolean) => void isMobile: boolean toggleSidebar: () => void } const SidebarContext = React.createContext(null) function useSidebar() { const context = React.useContext(SidebarContext) if (!context) { throw new Error("useSidebar must be used within a SidebarProvider.") } return context } const SidebarProvider = React.forwardRef< HTMLDivElement, React.ComponentProps<"div"> & { defaultOpen?: boolean open?: boolean onOpenChange?: (open: boolean) => void } >( ( { defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }, ref ) => { const isMobile = useIsMobile() const [openMobile, setOpenMobile] = React.useState(false) // This is the internal state of the sidebar. // We use openProp and setOpenProp for control from outside the component. const [_open, _setOpen] = React.useState(defaultOpen) const open = openProp ?? _open const setOpen = React.useCallback( (value: boolean | ((value: boolean) => boolean)) => { const openState = typeof value === "function" ? value(open) : value if (setOpenProp) { setOpenProp(openState) } else { _setOpen(openState) } // This sets the cookie to keep the sidebar state. document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}` }, [setOpenProp, open] ) // Helper to toggle the sidebar. const toggleSidebar = React.useCallback(() => { return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open) }, [isMobile, setOpen, setOpenMobile]) // Adds a keyboard shortcut to toggle the sidebar. React.useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { if ( event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey) ) { event.preventDefault() toggleSidebar() } } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, [toggleSidebar]) // We add a state so that we can do data-state="expanded" or "collapsed". // This makes it easier to style the sidebar with Tailwind classes. const state = open ? "expanded" : "collapsed" const contextValue = React.useMemo( () => ({ state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar, }), [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar] ) return (

{children}

) } ) SidebarProvider.displayName = "SidebarProvider" const Sidebar = React.forwardRef< HTMLDivElement, React.ComponentProps<"div"> & { side?: "left" | "right" variant?: "sidebar" | "floating" | "inset" collapsible?: "offcanvas" | "icon" | "none" } >( ( { side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }, ref ) => { const { isMobile, state, openMobile, setOpenMobile } = useSidebar() if (collapsible === "none") { return (

{children}

) } if (isMobile) { return ( Sidebar Displays the mobile sidebar.

{children}

) } return (

{/* This is what handles the sidebar gap on desktop */}

) } ) Sidebar.displayName = "Sidebar" const SidebarTrigger = React.forwardRef< React.ElementRef, React.ComponentProps >(({ className, onClick, ...props }, ref) => { const { toggleSidebar } = useSidebar() return ( ) }) SidebarTrigger.displayName = "SidebarTrigger" const SidebarRail = React.forwardRef< HTMLButtonElement, React.ComponentProps<"button"> >(({ className, ...props }, ref) => { const { toggleSidebar } = useSidebar() return (

) } [V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); /* Added coss ui tokens for info, success, and warning states */ --info: oklch(0.6 0.118 184.704); --info-foreground: oklch(1 0 0); --success: oklch(0.646 0.222 41.116); --success-foreground: oklch(1 0 0); --warning: oklch(0.828 0.189 84.429); --warning-foreground: oklch(0.145 0 0); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); /* Added dark mode coss ui tokens */ --info: oklch(0.696 0.17 162.48); --info-foreground: oklch(0.145 0 0); --success: oklch(0.488 0.243 264.376); --success-foreground: oklch(0.145 0 0); --warning: oklch(0.769 0.188 70.08); --warning-foreground: oklch(0.145 0 0); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); /* Added Tailwind color mappings for coss ui tokens */ --color-info: var(--info); --color-info-foreground: var(--info-foreground); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="ui/frame.tsx" isMerged="true" import type * as React from "react"; import { cn } from "@/lib/utils"; function Frame({ className, stackedPanels = false, ...props }: React.ComponentProps<"div"> & { stackedPanels?: boolean }) { return (

); } function FramePanel({ className, ...props }: React.ComponentProps<"div">) { return (

); } function FrameHeader({ className, ...props }: React.ComponentProps<"header">) { return (

); } function FrameTitle({ className, ...props }: React.ComponentProps<"div">) { return (

); } function FrameDescription({ className, ...props }: React.ComponentProps<"div">) { return (

); } function FrameFooter({ className, ...props }: React.ComponentProps<"footer">) { return (

); } export { Frame, FramePanel, FrameHeader, FrameTitle, FrameDescription, FrameFooter, }; [V0_FILE]typescriptreact:file="components/dashboard/block-transactions-card.tsx" isMerged="true" import { Check } from "lucide-react" import { Frame, FramePanel } from "@/ui/frame" const transactions = [ { block: "#7103744", amount: "0.000174994 ETH", hash: "0x68d95c6479..", status: "Confirmed" }, { block: "#7103744", amount: "0.000174994 ETH", hash: "0x68d95c6479..", status: "Confirmed" }, { block: "#7103744", amount: "0.000174994 ETH", hash: "0x68d95c6479..", status: "Confirmed" }, { block: "#7103744", amount: "0.000174994 ETH", hash: "0x68d95c6479..", status: "Confirmed" }, { block: "#7103744", amount: "0.000174994 ETH", hash: "0x68d95c6479..", status: "Confirmed" }, { block: "#7103744", amount: "0.000174994 ETH", hash: "0x68d95c6479..", status: "Confirmed" }, ] export function BlockTransactionsCard() { return ( {transactions.map((tx, index) => (

{tx.block} {tx.amount}

{tx.hash}

{tx.status}

))} ) } [V0_FILE]typescriptreact:file="ui/table.tsx" isMerged="true" import type * as React from "react"; import { cn } from "@/lib/utils"; function Table({ className, ...props }: React.ComponentProps<"table">) { return (

); } function TableHeader({ className, ...props }: React.ComponentProps<"thead">) { return ( ); } function TableBody({ className, ...props }: React.ComponentProps<"tbody">) { return ( ); } function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) { return ( tr]:last:border-b-0 in-data-[slot=frame]:*:[tr]:hover:bg-transparent", className, )} data-slot="table-footer" {...props} /> ); } function TableRow({ className, ...props }: React.ComponentProps<"tr">) { return ( ); } function TableHead({ className, ...props }: React.ComponentProps<"th">) { return (

); } function TableCell({ className, ...props }: React.ComponentProps<"td">) { return (

); } function TableCaption({ className, ...props }: React.ComponentProps<"caption">) { return (

); } export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, }; [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { AppSidebar } from "@/components/app-sidebar" import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar" import { Navbar } from "@/components/navbar" import { DailyTransactionsCard } from "@/components/dashboard/daily-transactions-card" import { DappsCard } from "@/components/dashboard/dapps-card" import { TpsCard } from "@/components/dashboard/tps-card" import { GasSpentCard } from "@/components/dashboard/gas-spent-card" import { LatestBlockCard } from "@/components/dashboard/latest-block-card" import { BlockTransactionsCard } from "@/components/dashboard/block-transactions-card" import { RecentTransactionsTable } from "@/components/dashboard/recent-transactions-table" export default function Page() { return (

Analytics

{/* Left section - 2x2 grid */}

{/* Right column */}

) } [V0_FILE]typescriptreact:file="components/nav-main.tsx" isEdit="true" isMerged="true" "use client" import { ChevronRight, type LucideIcon } from "lucide-react" import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible" import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, } from "@/components/ui/sidebar" export function NavMain({ items, }: { items: { title: string url: string icon: LucideIcon isActive?: boolean items?: { title: string url: string }[] }[] }) { return ( Platform {items.map((item) => ( {item.title} {item.items?.length ? ( <> Toggle {item.items?.map((subItem) => ( {subItem.title} ))} ) : null} ))} ) } [V0_FILE]png:file="public/images/image.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-yKz5tOGcDeVSFTdElEHcTkMZBJjawo.png" isMerged="true" [V0_FILE]typescriptreact:file="components/nav-user.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { BadgeCheck, Bell, ChevronsUpDown, CreditCard, LogOut, Sparkles } from "lucide-react" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from "@/components/ui/sidebar" export function NavUser({ user, }: { user: { name: string email: string avatar: string } }) { const { isMobile } = useSidebar() return ( CN

{user.name} {user.email}

Upgrade to Pro Account Billing Notifications Log out ) } [V0_FILE]typescriptreact:file="components/app-sidebar.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type * as React from "react" import { Frame, Map, PieChart, Wallet, ArrowRightLeft, Network, Grid, Archive, GalleryVerticalEnd } from "lucide-react" import { NavMain } from "@/components/nav-main" import { NavProjects } from "@/components/nav-projects" import { NavUser } from "@/components/nav-user" import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, } from "@/components/ui/sidebar" const data = { user: { name: "dazai", email: "deewakar.tech@gmail.com", avatar: "/images/image.png", }, navMain: [ { title: "Wallet", url: "#", icon: Wallet, isActive: true, items: [ { title: "History", url: "#", }, { title: "Starred", url: "#", }, { title: "Settings", url: "#", }, ], }, { title: "Swap", url: "#", icon: ArrowRightLeft, items: [ { title: "Exchange", url: "#", }, { title: "History", url: "#", }, { title: "Favorites", url: "#", }, ], }, { title: "Network", url: "#", icon: Network, items: [ { title: "Status", url: "#", }, { title: "Peers", url: "#", }, { title: "Nodes", url: "#", }, { title: "Settings", url: "#", }, ], }, { title: "Grid", url: "#", icon: Grid, items: [ { title: "Dashboard", url: "#", }, { title: "Analytics", url: "#", }, { title: "Reports", url: "#", }, { title: "Export", url: "#", }, ], }, { title: "Archive", url: "#", icon: Archive, items: [ { title: "Old Data", url: "#", }, { title: "Backup", url: "#", }, { title: "Restore", url: "#", }, ], }, ], projects: [ { name: "Design Engineering", url: "#", icon: Frame, }, { name: "Sales & Marketing", url: "#", icon: PieChart, }, { name: "Travel", url: "#", icon: Map, }, ], } export function AppSidebar({ ...props }: React.ComponentProps) { return (

Acme Inc Enterprise

) } [V0_FILE]typescriptreact:file="ui/tabs.tsx" isMerged="true" "use client"; import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"; import { cn } from "@/lib/utils"; type TabsVariant = "default" | "underline"; function Tabs({ className, ...props }: TabsPrimitive.Root.Props) { return ( ); } function TabsList({ variant = "default", className, children, ...props }: TabsPrimitive.List.Props & { variant?: TabsVariant; }) { return ( {children} ); } function TabsTab({ className, ...props }: TabsPrimitive.Tab.Props) { return ( ); } function TabsPanel({ className, ...props }: TabsPrimitive.Panel.Props) { return ( ); } export { Tabs, TabsList, TabsTab, TabsTab as TabsTrigger, TabsPanel, TabsPanel as TabsContent, }; [V0_FILE]typescriptreact:file="components/theme-switcher.tsx" isMerged="true" "use client" import { Sun, Moon } from "lucide-react" import { Tabs, TabsList, TabsTab } from "@/ui/tabs" import { useTheme } from "./theme-provider" export function ThemeSwitcher() { const { theme, setTheme } = useTheme() return ( setTheme(value as "light" | "dark")}> ) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isEdit="true" isMerged="true" "use client" import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, useTheme } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } export { useTheme } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import { ThemeProvider } from "@/components/theme-provider" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "v0 App", description: "Created with v0", generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/dashboard/daily-transactions-card.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Frame, FramePanel, FrameHeader, FrameTitle } from "@/ui/frame" import { ChartContainer, ChartTooltip } from "@/components/ui/chart" import { Area, AreaChart, CartesianGrid, XAxis, YAxis, ReferenceLine } from "recharts" import { useTheme } from "@/components/theme-provider" const data = [ { time: "12:00", transactions: 135000 }, { time: "13:00", transactions: 128000 }, { time: "14:00", transactions: 132000 }, { time: "15:00", transactions: 130000 }, { time: "16:00", transactions: 133000 }, { time: "17:00", transactions: 131000 }, { time: "18:00", transactions: 134000 }, { time: "19:00", transactions: 136000 }, { time: "20:00", transactions: 148000 }, { time: "21:00", transactions: 138000 }, { time: "22:00", transactions: 141305 }, ] export function DailyTransactionsCard() { const { theme } = useTheme() const isDark = theme === "dark" return ( Daily Transactions 24h

141,305

{ if (active && payload && payload.length) { return (

Transactions {payload[0].value.toLocaleString()}

) } return null }} />

) } [V0_FILE]typescriptreact:file="components/dashboard/recent-transactions-table.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Frame, FrameHeader, FrameTitle, FramePanel } from "@/ui/frame" import { Table, TableBody, TableCell, TableRow } from "@/ui/table" import { useTheme } from "@/components/theme-provider" const transactions = [ { id: 1, type: "Mint", hash: "0xdcc2 ... 09d8", status: "Success", time: "a few seconds ago" }, { id: 2, type: "Mint", hash: "0xdcc2 ... 09d8", status: "Success", time: "a few seconds ago" }, { id: 3, type: "Mint", hash: "0xdcc2 ... 09d8", status: "Success", time: "a few seconds ago" }, { id: 4, type: "Mint", hash: "0xdcc2 ... 09d8", status: "Success", time: "a few seconds ago" }, { id: 5, type: "Mint", hash: "0xdcc2 ... 09d8", status: "Success", time: "a few seconds ago" }, ] export function RecentTransactionsTable() { const { theme } = useTheme() const isDark = theme === "dark" return ( Recent Transactions {transactions.map((tx) => ( {tx.type} {tx.hash}

{tx.status} {tx.time}

))}

) } [V0_FILE]typescriptreact:file="components/dashboard/latest-block-card.tsx" isEdit="true" isMerged="true" import { Frame, FramePanel, FrameHeader, FrameTitle } from "@/ui/frame" export function LatestBlockCard() { return ( Latest Block View all

7,103,148

0×0b3413e3362a6b4..

Block Reward

0.00 ETH

) } [V0_FILE]typescriptreact:file="components/dashboard/gas-spent-card.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Frame, FramePanel, FrameHeader, FrameTitle } from "@/ui/frame" import { ChartContainer, ChartTooltip } from "@/components/ui/chart" import { Area, AreaChart, CartesianGrid, XAxis, YAxis, ReferenceLine } from "recharts" import { useTheme } from "@/components/theme-provider" const data = [ { time: "12:00", gas: 0.00018 }, { time: "13:00", gas: 0.00015 }, { time: "14:00", gas: 0.00014 }, { time: "15:00", gas: 0.00013 }, { time: "16:00", gas: 0.000125 }, { time: "17:00", gas: 0.00012 }, { time: "18:00", gas: 0.000115 }, { time: "19:00", gas: 0.00013 }, { time: "20:00", gas: 0.00014 }, { time: "21:00", gas: 0.000135 }, { time: "22:00", gas: 0.00013877 }, ] const xAxisTicks = ["12:00", "14:00", "16:00", "18:00", "20:00", "22:00"] export function GasSpentCard() { const { theme } = useTheme() const isDark = theme === "dark" return ( Gas Spent 24h

0.00013877{" "} ETH

{ if (active && payload && payload.length) { return (

Gas Spent {payload[0].value} ETH

) } return null }} />

) } [V0_FILE]typescriptreact:file="components/dashboard/tps-card.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Frame, FramePanel, FrameHeader, FrameTitle } from "@/ui/frame" import { ChartContainer, ChartTooltip } from "@/components/ui/chart" import { Bar, BarChart, XAxis, YAxis, Cell, CartesianGrid } from "recharts" import { useTheme } from "@/components/theme-provider" const data = [ { time: "12:00", tps: 2.8 }, { time: "12:15", tps: 1.2 }, { time: "12:30", tps: 1.8 }, { time: "12:45", tps: 0.9 }, { time: "13:00", tps: 1.6 }, { time: "13:15", tps: 1.4 }, { time: "13:30", tps: 2.0 }, { time: "13:45", tps: 1.1 }, { time: "14:00", tps: 1.5 }, { time: "14:15", tps: 1.3 }, { time: "14:30", tps: 1.7 }, { time: "14:45", tps: 0.8 }, { time: "15:00", tps: 1.4 }, { time: "15:15", tps: 1.9 }, { time: "15:30", tps: 1.2 }, { time: "15:45", tps: 1.6 }, { time: "16:00", tps: 1.8 }, { time: "16:15", tps: 1.0 }, { time: "16:30", tps: 1.5 }, { time: "16:45", tps: 1.3 }, { time: "17:00", tps: 2.1 }, { time: "17:15", tps: 1.4 }, { time: "17:30", tps: 1.7 }, { time: "17:45", tps: 1.1 }, { time: "18:00", tps: 1.6 }, { time: "18:15", tps: 1.8 }, { time: "18:30", tps: 1.2 }, { time: "18:45", tps: 1.5 }, { time: "19:00", tps: 1.9 }, { time: "19:15", tps: 1.3 }, { time: "19:30", tps: 1.4 }, { time: "19:45", tps: 1.7 }, { time: "20:00", tps: 2.2 }, { time: "20:15", tps: 1.5 }, { time: "20:30", tps: 1.8 }, { time: "20:45", tps: 1.1 }, { time: "21:00", tps: 1.6 }, { time: "21:15", tps: 1.4 }, { time: "21:30", tps: 1.9 }, { time: "21:45", tps: 1.2 }, { time: "22:00", tps: 1.61 }, ] const xAxisTicks = ["12:00", "14:00", "16:00", "18:00", "20:00", "22:00"] export function TpsCard() { const { theme } = useTheme() const isDark = theme === "dark" return ( TPS 24h

1.61{" "} TX/s

{ if (active && payload && payload.length) { return (

TPS {payload[0].value} TX/s

) } return null }} /> {data.map((entry, index) => ( ))}

) } [V0_FILE]typescriptreact:file="components/dashboard/dapps-card.tsx" isEdit="true" isQuickEdit="true" "use client" import { Frame, FramePanel, FrameHeader, FrameTitle } from "@/ui/frame" import { Zap, Code, Rocket } from "lucide-react" const dapps = [ { name: "Redbrick", Icon: Code }, { name: "Zora", Icon: Zap }, { name: "Moonshot", Icon: Rocket }, ] export function DappsCard() { const activeCount = 42 const buildingCount = 23 const totalCount = activeCount + buildingCount return ( dApps View all

{totalCount}

{Array.from({ length: totalCount }).map((_, index) => (

))}

Active: {activeCount} Building: {buildingCount}

{/* dApps list */}

{dapps.map((dapp) => (

{dapp.name}

))}

) }

About

Tags

Share

About

Tags

Share

More from deewakar-k

More Templates Like This

About

Tags

Share

About

Tags

Share

More from deewakar-k

More Templates Like This