[V0_FILE]typescriptreact:file="app/page.tsx" import type { Metadata } from "next" import Link from "next/link" import { Button } from "@/components/ui/button" import { MarketOverview } from "@/components/market-overview" import { PortfolioSummary } from "@/components/portfolio-summary" import { RecentTransactions } from "@/components/recent-transactions" import { TopCryptos } from "@/components/top-cryptos" import { ModeToggle } from "@/components/mode-toggle" export const metadata: Metadata = { title: "CryptoVest - Your Crypto Investment Dashboard", description: "Track, analyze, and manage your cryptocurrency investments", } export default function Home() { return (

CryptoVest

Dashboard

) } [V0_FILE]typescriptreact:file="components/mode-toggle.tsx" "use client" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { Moon, Sun } from "lucide-react" export function ModeToggle() { const { theme, setTheme } = useTheme() return ( ) } [V0_FILE]typescriptreact:file="components/market-overview.tsx" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts" const mockData = [ { date: "Jan", btc: 42000, eth: 3200, sol: 140, total: 45340 }, { date: "Feb", btc: 44500, eth: 3100, sol: 120, total: 47720 }, { date: "Mar", btc: 47000, eth: 3300, sol: 130, total: 50430 }, { date: "Apr", btc: 45000, eth: 3000, sol: 110, total: 48110 }, { date: "May", btc: 49000, eth: 3500, sol: 150, total: 52650 }, { date: "Jun", btc: 52000, eth: 3800, sol: 180, total: 55980 }, { date: "Jul", btc: 56000, eth: 4000, sol: 200, total: 60200 }, ] export function MarketOverview() { const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) }, []) if (!mounted) { return null } return ( Market Overview Track cryptocurrency market trends

All Bitcoin Ethereum Solana

) } [V0_FILE]typescriptreact:file="components/portfolio-summary.tsx" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { ArrowUpRight } from "lucide-react" export function PortfolioSummary() { return ( Portfolio Summary Your investment overview

Total Balance

+5.2%

$12,680.24

Invested

$10,000.00

Profit/Loss

+$2,680.24

Assets

Transactions

Bitcoin

$6,240.12

+3.2%

Ethereum

$4,120.87

+7.8%

Solana

$2,319.25

-1.4%

) } [V0_FILE]typescriptreact:file="components/recent-transactions.tsx" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { ArrowDownLeft, ArrowUpRight } from "lucide-react" export function RecentTransactions() { return ( Recent Transactions Your latest crypto transactions

Bought Bitcoin

+0.0025 BTC

Mar 21, 2023

$120.50

Sold Ethereum

-0.5 ETH

Mar 18, 2023

$1,650.00

Bought Solana

+2.5 SOL

Mar 15, 2023

$275.00

Bought Ethereum

+0.25 ETH

Mar 12, 2023

$825.00

) } [V0_FILE]typescriptreact:file="components/top-cryptos.tsx" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { ArrowUpRight, ArrowDownRight, Search } from "lucide-react" const cryptos = [ { id: "bitcoin", name: "Bitcoin", symbol: "BTC", price: 56842.32, change: 2.34, marketCap: 1102.45, volume: 32.5, }, { id: "ethereum", name: "Ethereum", symbol: "ETH", price: 3245.67, change: 3.56, marketCap: 389.12, volume: 18.9, }, { id: "solana", name: "Solana", symbol: "SOL", price: 138.92, change: -1.24, marketCap: 56.78, volume: 5.2, }, { id: "cardano", name: "Cardano", symbol: "ADA", price: 0.58, change: 0.87, marketCap: 20.45, volume: 1.8, }, { id: "binancecoin", name: "Binance Coin", symbol: "BNB", price: 312.45, change: -0.32, marketCap: 48.23, volume: 2.1, }, { id: "ripple", name: "XRP", symbol: "XRP", price: 0.52, change: 1.23, marketCap: 27.89, volume: 3.4, }, { id: "polkadot", name: "Polkadot", symbol: "DOT", price: 6.78, change: 2.56, marketCap: 8.45, volume: 0.9, }, ] export function TopCryptos() { const [search, setSearch] = useState("") const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) }, []) if (!mounted) { return null } const filteredCryptos = cryptos.filter( (crypto) => crypto.name.toLowerCase().includes(search.toLowerCase()) || crypto.symbol.toLowerCase().includes(search.toLowerCase()), ) return ( Top Cryptocurrencies Real-time prices of top cryptocurrencies

setSearch(e.target.value)} />

{filteredCryptos.map((crypto) => (

{crypto.name}

{crypto.symbol}

${crypto.price.toLocaleString()}

= 0 ? "text-green-500" : "text-red-500" }`} > {crypto.change >= 0 ? ( ) : ( )} {Math.abs(crypto.change)}%

))}

) } [V0_FILE]typescriptreact:file="app/login/page.tsx" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" export default function LoginPage() { return (

Password Forgot password?

Or continue with

Don't have an account?{" "} Sign up

) } [V0_FILE]typescriptreact:file="app/signup/page.tsx" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Checkbox } from "@/components/ui/checkbox" export default function SignupPage() { return (

Create an account Enter your information to create an account

First name

Last name

Password

Confirm password

I agree to the{" "} terms of service {" "} and{" "} privacy policy

Or continue with

Already have an account?{" "} Login

) } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import "@/app/globals.css" import { Inter } from "next/font/google" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="tailwind.config.js" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], }

About

About