[V0_FILE]typescriptreact:file="components/metrics-card.tsx" isFixed="true" isQuickEdit="true" import { Card } from "@/components/ui/card" import { ArrowUpRight } from "lucide-react" import type React from "react" // Added import for React interface MetricsCardProps { title: string value: string change: { value: string percentage: string isPositive: boolean } chart?: React.ReactNode } export function MetricsCard({ title, value, change, chart }: MetricsCardProps) { return (

{title}

{chart ? : null}

{value}

+{change.value} {change.percentage}

{chart}

) } [V0_FILE]typescriptreact:file="components/stats-chart.tsx" "use client" import { Line, LineChart, ResponsiveContainer, Tooltip } from "recharts" const data = [ { date: "Mar", value: 300 }, { date: "Apr", value: 350 }, { date: "May", value: 200 }, { date: "Jun", value: 400 }, { date: "Jul", value: 300 }, { date: "Aug", value: 200 }, { date: "Sep", value: 450 }, { date: "Oct", value: 500 }, { date: "Nov", value: 480 }, { date: "Dec", value: 400 }, { date: "Jan", value: 350 }, { date: "Feb", value: 400 }, ] export function StatsChart() { return (

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

Value {payload[0].value}

Date {payload[0].payload.date}

) } return null }} />

) } [V0_FILE]typescriptreact:file="components/vault-table.tsx" import { Avatar } from "@/components/ui/avatar" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { MoreHorizontal } from "lucide-react" const vaults = [ { name: "Bitcoin", symbol: "BTC", price: "$13,643.21", daily: "+$213.8", balance: "$13,954.04", apy: "8.56%", state: "Fixed", startDate: "05.10.2023", liquidity: "high", }, { name: "USDT", symbol: "USDT", price: "$1.00", daily: "+$45.1", balance: "$3,954.04", apy: "5.44%", state: "Fixed", startDate: "12.03.2023", liquidity: "medium", }, { name: "Ethereum", symbol: "ETH", price: "$2,123.87", daily: "+$13.5", balance: "$3,954.04", apy: "4.12%", state: "Flexible", startDate: "21.01.2023", liquidity: "low", }, ] export function VaultTable() { return ( Vault Daily Balance ↓ APY ↓ State Start date Liquidity {vaults.map((vault) => (

{vault.name}

{vault.price}

{vault.daily} {vault.balance} {vault.apy} {vault.state} {vault.startDate}

{Array.from({ length: 3 }).map((_, i) => (

))}

) } [V0_FILE]typescriptreact:file="app/page.tsx" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { MetricsCard } from "@/components/metrics-card" import { StatsChart } from "@/components/stats-chart" import { VaultTable } from "@/components/vault-table" import { BarChart3, ChevronDown, Globe, Home, LayoutDashboard, LifeBuoy, Settings, Wallet } from "lucide-react" export default function Page() { return (

Overview

Aug 13, 2023 - Aug 18, 2023

General Statistics

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" import "@/styles/globals.css" import { Inter } from "next/font/google" import type React from "react" // Import React const inter = Inter({ subsets: ["latin"] }) export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]css:file="styles/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 20.5 90.2% 48.2%; --primary-foreground: 60 9.1% 97.8%; --secondary: 12 6.5% 15.1%; --secondary-foreground: 60 9.1% 97.8%; --muted: 12 6.5% 15.1%; --muted-foreground: 24 5.4% 63.9%; --accent: 12 6.5% 15.1%; --accent-foreground: 60 9.1% 97.8%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 60 9.1% 97.8%; --border: 12 6.5% 15.1%; --input: 12 6.5% 15.1%; --ring: 20.5 90.2% 48.2%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } }

About

About