[V0_FILE]plaintext:file=".gitignore" isMerged="true" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" isMerged="true" # TCV Auction *Automatically synced with your [v0.dev](https://v0.dev) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/zigexn/tcv-auction) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.dev-black?style=for-the-badge)](https://v0.dev/chat/projects/Px9EjD8Rxgu) ## Overview This repository will stay in sync with your deployed chats on [v0.dev](https://v0.dev). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.dev](https://v0.dev). ## Deployment Your project is live at: **[https://vercel.com/zigexn/tcv-auction](https://vercel.com/zigexn/tcv-auction)** ## Build your app Continue building your app on: **[https://v0.dev/chat/projects/Px9EjD8Rxgu](https://v0.dev/chat/projects/Px9EjD8Rxgu)** ## How It Works 1. Create and modify your project using [v0.dev](https://v0.dev) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescript:file="app/actions.ts" isMerged="true" "use server" import { headers } from "next/headers" export async function getClientIP(): Promise { const headersList = headers() // デバッグ用にすべてのヘッダーを確認 console.log("All headers:", Object.fromEntries(headersList.entries())) // X-Forwarded-For ヘッダーからIPアドレスを取得 const forwardedFor = headersList.get("x-forwarded-for") if (forwardedFor) { return forwardedFor.split(",")[0].trim() } // X-Real-IP ヘッダーを確認 const realIP = headersList.get("x-real-ip") if (realIP) { return realIP.trim() } // Cloudflare経由の場合 const cfConnectingIP = headersList.get("cf-connecting-ip") if (cfConnectingIP) { return cfConnectingIP.trim() } return "Unknown" } [V0_FILE]typescript:file="app/actions/supabase-check.ts" isMerged="true" "use server" import { createServerClient } from "@/lib/supabase" export async function checkSupabaseEmailSettings() { try { const supabase = createServerClient() // Supabaseの設定情報を取得 const { data, error } = await supabase.auth.admin.listUsers({ page: 1, perPage: 1, }) if (error) { return { success: false, message: `Failed to check Supabase settings: ${error.message}`, } } return { success: true, message: "Supabase connection successful", data: { usersCount: data.users.length, hasServiceRole: !!process.env.SUPABASE_SERVICE_ROLE_KEY, }, } } catch (error: any) { return { success: false, message: `Error checking Supabase settings: ${error.message}`, } } } [V0_FILE]typescriptreact:file="app/auth/callback/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/auth/callback/page.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { useRouter, useSearchParams } from "next/navigation" import { getSupabaseBrowserClient } from "@/lib/supabase" import { toast } from "sonner" export default function AuthCallbackPage() { const router = useRouter() const searchParams = useSearchParams() const [isProcessing, setIsProcessing] = useState(true) const [error, setError] = useState(null) const supabase = getSupabaseBrowserClient() useEffect(() => { const handleAuthCallback = async () => { try { console.log("Processing auth callback...") const code = searchParams.get("code") const error_code = searchParams.get("error_code") const error_description = searchParams.get("error_description") // エラーがある場合の処理 if (error_code || error_description) { console.error("Auth callback error:", { error_code, error_description }) setError(error_description || "Authentication failed") toast.error("Authentication failed. Please try again.") setTimeout(() => { router.replace("/login") }, 3000) return } // codeがある場合はセッション交換を実行 if (code) { console.log("Exchanging code for session...") const { data, error: exchangeError } = await supabase.auth.exchangeCodeForSession(code) if (exchangeError) { console.error("Code exchange error:", exchangeError) setError("Failed to complete authentication") toast.error("Authentication failed. Please try again.") setTimeout(() => { router.replace("/login") }, 3000) return } if (data.session && data.user) { console.log("Authentication successful via code exchange:", { userId: data.user.id, email: data.user.email, }) toast.success("Successfully logged in!") // 🔧 修正11: リダイレクト前に認証状態の更新を待つ setTimeout(() => { router.replace("/") }, 1500) return } } // 通常のセッション確認 console.log("Checking current session...") const { data: sessionData, error: sessionError } = await supabase.auth.getSession() if (sessionError) { console.error("Session check error:", sessionError) setError("Session verification failed") toast.error("Authentication failed. Please try again.") setTimeout(() => { router.replace("/login") }, 3000) return } if (sessionData.session && sessionData.session.user) { console.log("Session found, redirecting to home...") toast.success("Successfully logged in!") setTimeout(() => { router.replace("/") }, 1500) } else { console.log("No session found, redirecting to login...") setError("No active session found") toast.error("Authentication failed. Please try again.") setTimeout(() => { router.replace("/login") }, 3000) } } catch (error: any) { console.error("Unexpected error in auth callback:", error) setError("An unexpected error occurred") toast.error("Authentication failed. Please try again.") setTimeout(() => { router.replace("/login") }, 3000) } finally { setIsProcessing(false) } } // コンポーネントマウント後に少し待ってから処理開始 const timer = setTimeout(() => { handleAuthCallback() }, 1000) return () => clearTimeout(timer) }, [router, searchParams, supabase]) if (error) { return (

Authentication Failed

{error}

Redirecting to login page...

) } return (

{isProcessing ? "Completing Authentication..." : "Redirecting..."}

Please wait while we log you in.

) } [V0_FILE]typescriptreact:file="app/auth/setup-guide.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { CheckCircle2, Circle, ExternalLink } from "lucide-react" import Link from "next/link" export default function SetupGuide() { return (

Supabase OTP Authentication Setup Guide

1. Create a Supabase Project

Create a project in the Supabase dashboard.

2. Enable Email Authentication

In the Supabase dashboard, go to "Authentication" → "Providers" → "Email" and enable "OTP".

Open Supabase Dashboard

3. Configure Site URL

In the Supabase dashboard, go to "Authentication" → "URL Configuration" and set your site URL.
Development: http://localhost:3000
Production: https://your-domain.com

4. Customize Email Templates (Optional)

In the Supabase dashboard, go to "Authentication" → "Email Templates" to customize the OTP email template.

Testing

Test the authentication by entering an email address in your application's login form and verifying that you receive a 6-digit authentication code.

) } [V0_FILE]typescriptreact:file="app/detail/[id]/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; body { font-family: Arial, Helvetica, sans-serif; } @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --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: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/login/page.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { useRouter } from "next/navigation" import { OTPLogin } from "@/components/auth/otp-login" import { useAuth } from "@/context/auth-context" import { EnvDebug } from "@/components/env-debug" import { SupabaseDebug } from "@/components/supabase-debug" import { Button } from "@/components/ui/button" export default function LoginPage() { const { user, isLoading } = useAuth() const router = useRouter() const isDev = process.env.NODE_ENV === "development" const [authError, setAuthError] = useState(null) // Redirect to home page if already logged in useEffect(() => { if (user && !isLoading) { router.push("/") } // 15秒経ってもロード中なら認証エラーとみなす const timeoutId = setTimeout(() => { if (isLoading) { setAuthError( "Authentication initialization is taking longer than expected. Try clearing your browser cache and refreshing.", ) } }, 15000) // 15秒に延長 return () => clearTimeout(timeoutId) }, [user, isLoading, router]) // ローカルストレージをクリアする関数 const clearLocalStorage = () => { try { localStorage.clear() sessionStorage.clear() window.location.reload() } catch (error) { console.error("Error clearing storage:", error) } } return (

Login to TCV Auction

Access high-quality, affordable cars from Japan.

{isLoading && !authError ? (

Checking authentication status...

) : authError ? (

{authError}

) : ( )}

{isDev && } {isDev && }

) } [V0_FILE]typescriptreact:file="app/not-found.tsx" isMerged="true" import Link from "next/link" export default function NotFound() { return (

404

Page Not Found

The page you are looking for doesn't exist or has been moved.

Go Home

) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { useRouter } from "next/navigation" import { useAuth } from "@/context/auth-context" import CarListWithAuth from "@/car-list-with-auth" import { Button } from "@/components/ui/button" export default function Home() { const router = useRouter() const { user, isLoading } = useAuth() const [isReady, setIsReady] = useState(false) const [isTimeout, setTimeout] = useState(false) useEffect(() => { console.log("Home page - Auth state:", { user: !!user, isLoading, userId: user?.id }) // 🔧 修正9: 認証状態の判定を改善 if (!isLoading) { if (!user) { console.log("No user found, redirecting to login...") router.replace("/login") } else { console.log("User authenticated, showing car list") setIsReady(true) } } // 🔧 修正10: タイムアウト時間を延長 const timeoutId = window.setTimeout(() => { if (isLoading) { console.log("Authentication check timed out, redirecting to login") setTimeout(true) router.replace("/login") } }, 10000) // 10秒に延長 return () => { window.clearTimeout(timeoutId) } }, [user, isLoading, router]) // タイムアウトした場合はログインボタンを表示 if (isTimeout) { return (

Authentication check timed out

) } // 認証チェック中はローディング表示 if (isLoading || !isReady) { return (

Checking authentication status...

) } // 認証済みの場合は車両リストを表示 return } [V0_FILE]typescriptreact:file="car-list.tsx" isMerged="true" "use client" import type React from "react" import { useEffect, useState, useCallback, useRef } from "react" import Image from "next/image" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { ImageOff, Heart, X, Filter } from "lucide-react" import { convertGoogleDriveUrl } from "@/utils/image-utils" import { Filters, type FilterState, type SortOption } from "@/components/filters" import { toast } from "sonner" import { CurrencySelect } from "@/components/currency-select" import { isWindows } from "@/utils/platform-utils" import { getClientIP } from "@/app/actions" import { FeedbackBanner } from "@/components/feedback-banner" import { useRouter } from "next/navigation" import { UserMenu } from "@/components/user-menu" interface Car { CarID: string maker: string shashu: string mileage: string year: number grade: string image_front: string image_buck: string image_dashboard: string image_meter: string FOB_dollar: string | number FOB_price_jpy: string | number } function CarCard({ car, onImageClick, onGoodClick, selectedCurrency, likedCars, }: { car: Car onImageClick: () => void onGoodClick: () => void selectedCurrency: string likedCars: Set }) { const isLiked = likedCars.has(car.CarID) return (

{/* モバイルでのグッドボタン */}

{car.maker} {car.shashu}

Model Code: {car.grade}

{/* デスクトップでのグッドボタン */}

{car.year} Model {car.mileage}

{selectedCurrency === "USD" ? (

Car Price (FOB) {car.FOB_dollar === "ASK" ? "ASK" : `US${Number(car.FOB_dollar).toLocaleString()}`}

) : (

Car Price (FOB) {car.FOB_price_jpy === "ASK" ? "ASK" : `JPY¥${Number(car.FOB_price_jpy).toLocaleString()}`}

)}

) } export default function CarList() { const router = useRouter() const [cars, setCars] = useState([]) const [filteredCars, setFilteredCars] = useState([]) const [originalCars, setOriginalCars] = useState([]) // 元の順序を保存 const [isLoading, setIsLoading] = useState(true) const [error, setError] = useState(null) const [selectedCountry, setSelectedCountry] = useState("Kenya") const [selectedCurrency, setSelectedCurrency] = useState("USD") const [showFilters, setShowFilters] = useState(false) const [isScrolled, setIsScrolled] = useState(false) const [lastScrollY, setLastScrollY] = useState(0) const [shouldShowHeader, setShouldShowHeader] = useState(true) const [isScrollingUp, setIsScrollingUp] = useState(true) const [showFloatingButton, setShowFloatingButton] = useState(false) const [showInitialCountrySelect, setShowInitialCountrySelect] = useState(true) const [isWindowsPlatform, setIsWindowsPlatform] = useState(false) const [showFeedback, setShowFeedback] = useState(false) const [currentSort, setCurrentSort] = useState("default") const [likedCars, setLikedCars] = useState>(new Set()) const headerRef = useRef(null) const dataFetchedRef = useRef(false) useEffect(() => { let lastScrollY = window.scrollY let ticking = false const updateScrollDirection = () => { const scrollY = window.scrollY const direction = scrollY > lastScrollY if (scrollY <= 0) { setIsScrollingUp(true) setShouldShowHeader(true) } else { setIsScrollingUp(!direction) setShouldShowHeader(!direction) } lastScrollY = scrollY > 0 ? scrollY : 0 ticking = false } const onScroll = () => { if (!ticking) { window.requestAnimationFrame(updateScrollDirection) ticking = true } } window.addEventListener("scroll", onScroll, { passive: true }) return () => window.removeEventListener("scroll", onScroll) }, []) useEffect(() => { const handleScroll = () => { const scrolled = window.scrollY > 100 if (scrolled !== isScrolled) { setIsScrolled(scrolled) if (scrolled) { setShowFilters(false) } } } window.addEventListener("scroll", handleScroll, { passive: true }) return () => window.removeEventListener("scroll", handleScroll) }, [isScrolled]) const showFiltersHeader = useCallback(() => { if (window.innerWidth >= 640) { setShouldShowHeader(true) setIsScrollingUp(true) if (headerRef.current) { headerRef.current.classList.remove("highlight-filters") void headerRef.current.offsetWidth headerRef.current.classList.add("highlight-filters") setTimeout(() => { headerRef.current?.classList.remove("highlight-filters") }, 2000) } } else { setShowFilters(true) } }, []) useEffect(() => { const timer = setTimeout(() => { setShowInitialCountrySelect(false) }, 3000) return () => clearTimeout(timer) }, []) useEffect(() => { if (dataFetchedRef.current) return let isMounted = true dataFetchedRef.current = true const fetchCars = async () => { try { const response = await fetch( "https://script.google.com/macros/s/AKfycbyWOz4V68pVT7zQIqlzBtQssZfw0Xp4BTXdkqrhs_gqXJ2j6KogccPnS9jGuvcP8WqrDw/exec", ) if (!response.ok) { throw new Error(`Network response was not ok: ${response.status}`) } const data = await response.json() if (!isMounted) return if (Array.isArray(data)) { // データ内の全てのCarIDを確認（デバッグ用） console.log( "Available Car IDs:", data.map((car) => String(car.CarID)), ) setCars(data) setFilteredCars(data) setOriginalCars(data) // 元の順序を保存 } else { throw new Error("Unexpected data structure") } } catch (error) { if (!isMounted) return console.error("Error fetching data:", error) setError("Failed to load vehicle data. Please try again later.") } finally { if (isMounted) { setIsLoading(false) } } } fetchCars() return () => { isMounted = false } }, []) useEffect(() => { if (typeof window !== "undefined") { setIsWindowsPlatform(isWindows()) } }, []) // Version 1と同じ挙動に変更 const handleGoodButtonClick = useCallback( async (carID: string) => { console.log("Attempting to send Good button request for CarID:", carID) if (!carID) { console.error("Error: Missing Car ID") toast.error("Error: Could not process request - Missing Car ID") return } // いいねの状態を切り替え const isCurrentlyLiked = likedCars.has(carID) setLikedCars((prev) => { const newLikedCars = new Set(prev) if (isCurrentlyLiked) { newLikedCars.delete(carID) } else { newLikedCars.add(carID) } return newLikedCars }) // いいねを追加する場合のみフィードバックを表示 if (!isCurrentlyLiked) { setShowFeedback(true) } try { // IPアドレスを取得 const clientIP = await getClientIP() console.log("Client IP:", clientIP) const payload = { carID, timestamp: new Date().toISOString(), country: selectedCountry, ipAddress: clientIP, action: isCurrentlyLiked ? "unlike" : "like", // いいねの状態に応じてアクションを変更 } console.log("Sending payload:", JSON.stringify(payload)) // Version 1と同じURLを使用 fetch( "https://script.google.com/macros/s/AKfycbzzQzenQpiIBCmQYfM7m9URy829PLjfwvgCOmRHolhR-O9XIIL9Iln6goEM9wU_67cWMw/exec", { method: "POST", mode: "no-cors", headers: { "Content-Type": "application/json", }, body: JSON.stringify(payload), }, ).catch((error) => { console.error("Error sending Good button request:", error) // エラーが発生してもユーザーには表示しない }) } catch (error) { console.error("Error in Good button request:", error) // エラーが発生してもユーザーには表示しない } }, [selectedCountry, likedCars], ) // sortCars関数をuseCallbackでメモ化 const sortCars = useCallback( (carsToSort: Car[], sortOption: SortOption) => { if (!carsToSort || !Array.isArray(carsToSort)) { setFilteredCars([]) return } const sorted = [...carsToSort] switch (sortOption) { case "default": // Relevanceの場合は元の順序に戻す if (originalCars.length > 0) { // 元の順序を保持しつつ、現在のフィルタリング条件を維持 const filteredIds = new Set(sorted.map((car) => car.CarID)) const relevanceSorted = originalCars.filter((car) => filteredIds.has(car.CarID)) setFilteredCars(relevanceSorted) return } break case "price_asc": sorted.sort((a, b) => { if (a.FOB_dollar === "ASK") return 1 if (b.FOB_dollar === "ASK") return -1 return Number(a.FOB_dollar) - Number(b.FOB_dollar) }) break case "price_desc": sorted.sort((a, b) => { if (a.FOB_dollar === "ASK") return 1 if (b.FOB_dollar === "ASK") return -1 return Number(b.FOB_dollar) - Number(a.FOB_dollar) }) break case "mileage_asc": sorted.sort((a, b) => { const numA = Number.parseInt(a.mileage.split("～")[0].replace(/[^0-9]/g, "")) const numB = Number.parseInt(b.mileage.split("～")[0].replace(/[^0-9]/g, "")) return numA - numB }) break case "mileage_desc": sorted.sort((a, b) => { const numA = Number.parseInt(a.mileage.split("～")[0].replace(/[^0-9]/g, "")) const numB = Number.parseInt(b.mileage.split("～")[0].replace(/[^0-9]/g, "")) return numB - numA }) break case "year_desc": sorted.sort((a, b) => b.year - a.year) break case "year_asc": sorted.sort((a, b) => a.year - b.year) break } setFilteredCars(sorted) }, [originalCars], ) // handleSortChange関数もuseCallbackでメモ化 const handleSortChange = useCallback( (sortOption: SortOption) => { setCurrentSort(sortOption) sortCars(filteredCars, sortOption) }, [filteredCars, sortCars], ) // handleFilterChange関数をuseCallbackでメモ化 const handleFilterChange = useCallback( (filters: FilterState) => { if (!cars || !Array.isArray(cars) || cars.length === 0) { setFilteredCars([]) return } let filtered = [...cars] // Filter by make if (filters.make !== "all") { filtered = filtered.filter((car) => car.maker === filters.make) } // Filter by model if (filters.model !== "all") { filtered = filtered.filter((car) => car.shashu === filters.model) } // Filter by grade if (filters.grade !== "all") { filtered = filtered.filter((car) => car.grade === filters.grade) } // Filter by year range if (filters.yearFrom !== "all") { filtered = filtered.filter((car) => car.year >= Number.parseInt(filters.yearFrom)) } if (filters.yearTo !== "all") { filtered = filtered.filter((car) => car.year <= Number.parseInt(filters.yearTo)) } // Filter by mileage if (filters.mileage !== "all") { filtered = filtered.filter((car) => car.mileage === filters.mileage) } // Filter by photos if (filters.onlyWithPhotos) { filtered = filtered.filter((car) => car.image_front || car.image_buck || car.image_dashboard || car.image_meter) } // Apply sorting sortCars(filtered, currentSort) }, [cars, currentSort, sortCars], ) // 車の詳細ページに遷移する関数 const handleCarSelect = (car: Car) => { // CarIDを文字列に変換 const carId = String(car.CarID) // URLに使用するIDを生成 let urlId = carId // もし先頭が「H」なら「1」に変換（例：H0470 → 10470） if (carId.startsWith("H")) { urlId = carId.replace(/^H/, "1") } console.log("Original CarID:", carId, "Using URL ID:", urlId) // URLを更新して詳細ページに遷移 router.push(`/detail/${urlId}`) } if (isLoading) return if (error) return return (

Car List

{filteredCars.length > 0 ? (

{filteredCars.map((car) => ( handleCarSelect(car)} onGoodClick={() => handleGoodButtonClick(car.CarID)} selectedCurrency={selectedCurrency} likedCars={likedCars} /> ))}

) : (

)}

= 640 ? !shouldShowHeader ? "translate-y-0 opacity-100" : "translate-y-16 opacity-0" : "" } `} >

{showFilters && (

Filters

Currency

{ setFilteredCars(originalCars) setCurrentSort("default") }} />

)} setShowFeedback(false)} />

) } function ImageWithFallback({ src, alt, ...props }: React.ComponentProps) { const [error, setError] = useState(false) if (error) { return (

) } return {alt}

setError(true)} {...props} /> } function LoadingSkeleton() { return (

{/* カードのスケルトン */}

{[...Array(6)].map((_, index) => (

))}

) } function ErrorMessage({ message }: { message: string }) { return (

{message}

) } function EmptyState() { return (

No vehicles available at the moment.

) } [V0_FILE]json:file="components.json" isMerged="true" { "$schema": "https://ui.shadcn.com/schema.json", "style": "default", "rsc": true, "tsx": true, "tailwind": { "config": "tailwind.config.ts", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/auth/login-button.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { useAuth } from "@/context/auth-context" import { toast } from "sonner" export function GoogleLoginButton() { const { signInWithGoogle } = useAuth() const [isLoading, setIsLoading] = useState(false) const handleLogin = async () => { try { setIsLoading(true) await signInWithGoogle() } catch (error) { console.error("Login error:", error) toast.error("Login failed. Please try again.") } finally { setIsLoading(false) } } return ( ) } [V0_FILE]typescriptreact:file="components/auth/login-modal.tsx" isMerged="true" "use client" import { useState } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { OTPLogin } from "@/components/auth/otp-login" import { useAuth } from "@/context/auth-context" import { LogIn, HelpCircle } from "lucide-react" import Link from "next/link" export function LoginModal() { const [open, setOpen] = useState(false) const { user } = useAuth() // すでにログインしている場合は表示しない if (user) { return null } return ( ) } [V0_FILE]typescriptreact:file="components/auth/magic-link-login.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { useAuth } from "@/context/auth-context" import { toast } from "sonner" export function MagicLinkLogin() { const [email, setEmail] = useState("") const [isLoading, setIsLoading] = useState(false) const [isEmailSent, setIsEmailSent] = useState(false) const { signInWithOtp } = useAuth() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!email) { toast.error("Please enter your email address") return } setIsLoading(true) try { await signInWithOtp(email) setIsEmailSent(true) toast.success("Magic link sent! Please check your inbox.") } catch (error) { console.error("Login error:", error) toast.error(error instanceof Error ? error.message : "Failed to send magic link") } finally { setIsLoading(false) } } if (isEmailSent) { return (

Check your email

We've sent a magic link to {email}

Click the link in the email to sign in to your account.

) } return ( ) } [V0_FILE]typescriptreact:file="components/auth/user-profile.tsx" isMerged="true" "use client" import { useState } from "react" import Image from "next/image" import { useAuth } from "@/context/auth-context" import { Button } from "@/components/ui/button" import { CountrySelect } from "@/components/country-select" import { CurrencySelect } from "@/components/currency-select" import { toast } from "sonner" import { LogOut, User } from "lucide-react" export function UserProfile() { const { user, profile, signOut, updateProfile, isLoading } = useAuth() const [isUpdating, setIsUpdating] = useState(false) if (isLoading) { return

} if (!user || !profile) { return null } const handleCountryChange = async (country: string) => { try { setIsUpdating(true) await updateProfile({ country }) toast.success("Country updated successfully") } catch (error) { console.error("Error updating country:", error) toast.error("Failed to update country") } finally { setIsUpdating(false) } } const handleCurrencyChange = async (currency: string) => { try { setIsUpdating(true) await updateProfile({ currency }) toast.success("Currency updated successfully") } catch (error) { console.error("Error updating currency:", error) toast.error("Failed to update currency") } finally { setIsUpdating(false) } } const handleSignOut = async () => { try { await signOut() toast.success("Successfully logged out") } catch (error) { console.error("Error signing out:", error) toast.error("Failed to log out") } } return (

{profile.avatar_url ? ( ${profile.full_name$ ) : (

)}

) } [V0_FILE]typescriptreact:file="components/car-header.tsx" isMerged="true" "use client" import { useAuth } from "@/context/auth-context" import { UserProfile } from "@/components/auth/user-profile" import { LoginModal } from "@/components/auth/login-modal" import { CountrySelect } from "@/components/country-select" import { CurrencySelect } from "@/components/currency-select" export function CarHeader({ selectedCountry, setSelectedCountry, selectedCurrency, setSelectedCurrency, }: { selectedCountry: string setSelectedCountry: (country: string) => void selectedCurrency: string setSelectedCurrency: (currency: string) => void }) { const { user, profile, isLoading } = useAuth() // 認証済みユーザーの場合、プロファイルから国と通貨を取得 if (user && profile && !isLoading) { // プロファイルの値と現在の選択が異なる場合は更新 if (profile.country !== selectedCountry) { setSelectedCountry(profile.country) } if (profile.currency !== selectedCurrency) { setSelectedCurrency(profile.currency) } } return (

Car Auction

{!user && ( <>

)}

) } [V0_FILE]typescriptreact:file="components/country-select.tsx" isMerged="true" "use client" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Globe } from "lucide-react" const COUNTRIES = [ { code: "KE", name: "Kenya", flag: "🇰🇪" }, { code: "TZ", name: "Tanzania", flag: "🇹🇿" }, { code: "ZM", name: "Zambia", flag: "🇿🇲" }, ] as const interface CountrySelectProps { value: string onChange: (value: string) => void } export function CountrySelect({ value, onChange }: CountrySelectProps) { return ( ) } [V0_FILE]typescriptreact:file="components/currency-select.tsx" isMerged="true" "use client" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" const CURRENCIES = [ { code: "USD", name: "US Dollar", symbol: "$" }, { code: "JPY", name: "Japanese Yen", symbol: "¥" }, ] as const interface CurrencySelectProps { value: string onChange: (value: string) => void } export function CurrencySelect({ value, onChange }: CurrencySelectProps) { return ( ) } [V0_FILE]typescriptreact:file="components/debug-env.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" export function DebugEnv() { const [showEnv, setShowEnv] = useState(false) return (

{showEnv && (

環境変数

NEXT_PUBLIC_SUPABASE_URL: {process.env.NEXT_PUBLIC_SUPABASE_URL || "未設定"}

NEXT_PUBLIC_SUPABASE_ANON_KEY:{" "} {process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY ? "設定済み（セキュリティのため非表示）" : "未設定"}

)}

環境変数の設定方法

Supabaseダッシュボードの「Project Settings」→「API」に移動
「Project URL」と「anon public」キーをコピー
プロジェクトのルートに .env.local ファイルを作成

以下の内容を追加:

              NEXT_PUBLIC_SUPABASE_URL=https://your-project-ref.supabase.co
              

              NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

開発サーバーを再起動

) } [V0_FILE]typescriptreact:file="components/env-debug.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" export function EnvDebug() { const [showEnv, setShowEnv] = useState(false) if (!showEnv) { return (

) } return (

Environment Variables

Supabase URL:

[Protected]

Supabase Anon Key:

[Protected]

Note: For security reasons, environment variable values are not displayed.

) } [V0_FILE]typescriptreact:file="components/error-boundary.tsx" isMerged="true" "use client" import { Component, type ErrorInfo, type ReactNode } from "react" import { Button } from "@/components/ui/button" import { clearAllCache } from "@/utils/cache-utils" interface Props { children: ReactNode fallback?: ReactNode } interface State { hasError: boolean error: Error | null errorInfo: ErrorInfo | null isAuthError: boolean isSessionExpired: boolean isAuthTimeout: boolean } export class ErrorBoundary extends Component { constructor(props: Props) { super(props) this.state = { hasError: false, error: null, errorInfo: null, isAuthError: false, isSessionExpired: false, isAuthTimeout: false, } } static getDerivedStateFromError(error: Error): State { // セキュリティ: エラーメッセージから機密情報を除外 const safeErrorPatterns = [/session/i, /auth/i, /unauthorized/i, /token/i, /expired/i, /timeout/i] const isAuthError = safeErrorPatterns.some((pattern) => pattern.test(error.message) || pattern.test(error.name)) // 🔒 セッション期限切れとタイムアウトを区別 const isSessionExpired = error.message.includes("expired") const isAuthTimeout = error.message.includes("timeout") return { hasError: true, error, errorInfo: null, isAuthError, isSessionExpired, isAuthTimeout, } } componentDidCatch(error: Error, errorInfo: ErrorInfo): void { this.setState({ error, errorInfo, }) // セキュリティ: 機密情報を含まないエラーログのみ出力 console.error("Error boundary triggered:", { name: error.name, message: error.message.substring(0, 100), // メッセージを制限 stack: error.stack?.substring(0, 500), // スタックトレースを制限 }) } handleLoginRedirect = (): void => { try { // セキュリティ: すべてのキャッシュとストレージをクリア clearAllCache() if (typeof window !== "undefined") { localStorage.clear() sessionStorage.clear() } } catch (e) { // クリーンアップエラーは無視 } // セキュリティ: 強制リダイレクト window.location.href = "/login" } handleForceReload = (): void => { try { clearAllCache() if (typeof window !== "undefined") { localStorage.clear() sessionStorage.clear() } } catch (e) { // クリーンアップエラーは無視 } window.location.reload() } render(): ReactNode { if (this.state.hasError) { if (this.props.fallback) { return this.props.fallback } // 🔒 セッション期限切れの場合 if (this.state.isSessionExpired) { return (

Session Expired

Your session has expired after 1 hour. Please log in again to continue.

) } // 🔒 認証タイムアウトの場合 if (this.state.isAuthTimeout) { return (

Unexpected Error

An authentication error occurred. Please try logging in again.

) } // セキュリティ: 一般的な認証エラーの場合 if (this.state.isAuthError) { return (

Authentication Required

Please log in again to continue.

) } // セキュリティ: 一般的なエラーでは詳細情報を隠蔽 return (

Something went wrong

An unexpected error occurred. Please try refreshing the page or logging in again.

) } return this.props.children } } [V0_FILE]typescriptreact:file="components/feedback-banner.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" import { ThumbsUp, X } from "lucide-react" import { Button } from "@/components/ui/button" interface FeedbackBannerProps { show: boolean onClose: () => void } export function FeedbackBanner({ show, onClose }: FeedbackBannerProps) { const bannerRef = useRef(null) useEffect(() => { if (show) { const timer = setTimeout(() => { onClose() }, 3000) const handleClickOutside = (event: MouseEvent) => { if (bannerRef.current && !bannerRef.current.contains(event.target as Node)) { onClose() } } document.addEventListener("click", handleClickOutside) return () => { clearTimeout(timer) document.removeEventListener("click", handleClickOutside) } } }, [show, onClose]) if (!show) return null return (

Added to favorites successfully!

) } [V0_FILE]typescript:file="components/filters.ts" isMerged="true" export interface FilterState { makes: string[] models: string[] yearFrom: string yearTo: string mileageFrom: string mileageTo: string grades: string[] onlyWithPhotos: boolean } export type SortOption = | "default" | "price_asc" | "price_desc" | "mileage_asc" | "mileage_desc" | "year_desc" | "year_asc" // Re-export the Filters component from filters.tsx export { Filters } from "./filters" [V0_FILE]typescriptreact:file="components/optimized-image.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import Image from "next/image" import { ImageOff } from "lucide-react" import { convertGoogleDriveUrl } from "@/utils/image-utils" interface OptimizedImageProps extends Omit, 'src'> { src?: string lowQualitySrc?: string highQualitySrc?: string } export function OptimizedImage({ src: propSrc, lowQualitySrc, highQualitySrc, alt, className, ...props }: OptimizedImageProps) { // Support both src and highQualitySrc props const imageSrc = highQualitySrc || propSrc || "" const [currentSrc, setCurrentSrc] = useState("/placeholder.svg") const [isLoading, setIsLoading] = useState(true) const [error, setError] = useState(false) useEffect(() => { if (!imageSrc) { setCurrentSrc("/placeholder.svg") setIsLoading(false) return } try { const convertedSrc = convertGoogleDriveUrl(imageSrc) setCurrentSrc(convertedSrc) setIsLoading(false) } catch (err) { console.error("Error converting image URL:", err) setError(true) setIsLoading(false) } }, [imageSrc]) if (error) { return (

) } return (

{ console.error("Image failed to load:", currentSrc) setError(true) }} {...props} /> {isLoading && (

)}

) } [V0_FILE]typescriptreact:file="components/site-header.tsx" isMerged="true" "use client" import { useRouter } from "next/navigation" import { UserMenu } from "@/components/user-menu" import { Button } from "@/components/ui/button" import { Search } from "lucide-react" interface SiteHeaderProps { onLogoClick?: () => void onSearchClick?: () => void } export function SiteHeader({ onLogoClick, onSearchClick }: SiteHeaderProps) { const router = useRouter() const handleLogoClick = () => { if (onLogoClick) { onLogoClick() } else { router.push("/") } } const handleSearchClick = () => { if (onSearchClick) { onSearchClick() } } return (

) } [V0_FILE]typescriptreact:file="components/supabase-debug.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" export function SupabaseDebug() { const [showDebug, setShowDebug] = useState(false) const [envStatus, setEnvStatus] = useState({ supabaseUrl: false, supabaseAnonKey: false, }) useEffect(() => { // Check environment variables setEnvStatus({ supabaseUrl: !!process.env.NEXT_PUBLIC_SUPABASE_URL, supabaseAnonKey: !!process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY, }) }, []) if (!showDebug) { return (

) } return (

Supabase Environment Variables

Supabase URL:

{envStatus.supabaseUrl ? "✅ Configured" : "❌ Not configured"}

Supabase Anon Key:

{envStatus.supabaseAnonKey ? "✅ Configured" : "❌ Not configured"}

Supabase connection will fail if these environment variables are not properly configured.

Check your environment variables in the Vercel dashboard.

) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/ui/accordion.tsx" isMerged="true" "use client" import * as React from "react" import * as AccordionPrimitive from "@radix-ui/react-accordion" import { ChevronDown } from "lucide-react" import { cn } from "@/lib/utils" const Accordion = AccordionPrimitive.Root const AccordionItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AccordionItem.displayName = "AccordionItem" const AccordionTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( svg]:rotate-180", className )} {...props} > {children} )) AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName const AccordionContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => (

{children}

)) AccordionContent.displayName = AccordionPrimitive.Content.displayName export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } [V0_FILE]typescriptreact:file="components/ui/alert-dialog.tsx" isMerged="true" "use client" import * as React from "react" import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" import { cn } from "@/lib/utils" import { buttonVariants } from "@/components/ui/button" const AlertDialog = AlertDialogPrimitive.Root const AlertDialogTrigger = AlertDialogPrimitive.Trigger const AlertDialogPortal = AlertDialogPrimitive.Portal const AlertDialogOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName const AlertDialogContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes) => (

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

) AlertDialogFooter.displayName = "AlertDialogFooter" const AlertDialogTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName const AlertDialogDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName const AlertDialogAction = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName const AlertDialogCancel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, } [V0_FILE]typescriptreact:file="components/ui/alert.tsx" isMerged="true" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const alertVariants = cva( "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", { variants: { variant: { default: "bg-background text-foreground", destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", }, }, defaultVariants: { variant: "default", }, } ) const Alert = React.forwardRef< HTMLDivElement, React.HTMLAttributes & VariantProps >(({ className, variant, ...props }, ref) => (

)) Alert.displayName = "Alert" const AlertTitle = React.forwardRef< HTMLParagraphElement, React.HTMLAttributes >(({ className, ...props }, ref) => (

)) AlertTitle.displayName = "AlertTitle" const AlertDescription = React.forwardRef< HTMLParagraphElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) AlertDescription.displayName = "AlertDescription" export { Alert, AlertTitle, AlertDescription } [V0_FILE]typescriptreact:file="components/ui/aspect-ratio.tsx" isMerged="true" "use client" import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio" const AspectRatio = AspectRatioPrimitive.Root export { AspectRatio } [V0_FILE]typescriptreact:file="components/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="components/ui/badge.tsx" isMerged="true" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return
} export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/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) => (
)) BreadcrumbList.displayName = "BreadcrumbList" const BreadcrumbItem = React.forwardRef< HTMLLIElement, React.ComponentPropsWithoutRef<"li"> >(({ 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">) => (
) BreadcrumbSeparator.displayName = "BreadcrumbSeparator" const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => ( ) BreadcrumbEllipsis.displayName = "BreadcrumbElipssis" export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, } [V0_FILE]typescriptreact:file="components/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="components/ui/calendar.tsx" isMerged="true" "use client" import * as React from "react" import { ChevronLeft, ChevronRight } from "lucide-react" import { DayPicker } from "react-day-picker" import { cn } from "@/lib/utils" import { buttonVariants } from "@/components/ui/button" export type CalendarProps = React.ComponentProps function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) { return ( , IconRight: ({ ...props }) => , }} {...props} /> ) } Calendar.displayName = "Calendar" export { Calendar } [V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" const Card = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) Card.displayName = "Card" const CardHeader = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) CardContent.displayName = "CardContent" const CardFooter = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } [V0_FILE]typescriptreact:file="components/ui/carousel.tsx" isMerged="true" "use client" import * as React from "react" import useEmblaCarousel, { type UseEmblaCarouselType, } from "embla-carousel-react" import { ArrowLeft, ArrowRight } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" type CarouselApi = UseEmblaCarouselType[1] type UseCarouselParameters = Parameters type CarouselOptions = UseCarouselParameters[0] type CarouselPlugin = UseCarouselParameters[1] type CarouselProps = { opts?: CarouselOptions plugins?: CarouselPlugin orientation?: "horizontal" | "vertical" setApi?: (api: CarouselApi) => void } type CarouselContextProps = { carouselRef: ReturnType[0] api: ReturnType[1] scrollPrev: () => void scrollNext: () => void canScrollPrev: boolean canScrollNext: boolean } & CarouselProps const CarouselContext = React.createContext(null) function useCarousel() { const context = React.useContext(CarouselContext) if (!context) { throw new Error("useCarousel must be used within a ") } return context } const Carousel = React.forwardRef< HTMLDivElement, React.HTMLAttributes & CarouselProps >( ( { orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref ) => { const [carouselRef, api] = useEmblaCarousel( { ...opts, axis: orientation === "horizontal" ? "x" : "y", }, plugins ) const [canScrollPrev, setCanScrollPrev] = React.useState(false) const [canScrollNext, setCanScrollNext] = React.useState(false) const onSelect = React.useCallback((api: CarouselApi) => { if (!api) { return } setCanScrollPrev(api.canScrollPrev()) setCanScrollNext(api.canScrollNext()) }, []) const scrollPrev = React.useCallback(() => { api?.scrollPrev() }, [api]) const scrollNext = React.useCallback(() => { api?.scrollNext() }, [api]) const handleKeyDown = React.useCallback( (event: React.KeyboardEvent) => { if (event.key === "ArrowLeft") { event.preventDefault() scrollPrev() } else if (event.key === "ArrowRight") { event.preventDefault() scrollNext() } }, [scrollPrev, scrollNext] ) React.useEffect(() => { if (!api || !setApi) { return } setApi(api) }, [api, setApi]) React.useEffect(() => { if (!api) { return } onSelect(api) api.on("reInit", onSelect) api.on("select", onSelect) return () => { api?.off("select", onSelect) } }, [api, onSelect]) return (
{children}
) } ) Carousel.displayName = "Carousel" const CarouselContent = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => { const { carouselRef, orientation } = useCarousel() return (

) }) CarouselContent.displayName = "CarouselContent" const CarouselItem = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => { const { orientation } = useCarousel() return (
) }) CarouselItem.displayName = "CarouselItem" const CarouselPrevious = React.forwardRef< HTMLButtonElement, React.ComponentProps >(({ className, variant = "outline", size = "icon", ...props }, ref) => { const { orientation, scrollPrev, canScrollPrev } = useCarousel() return ( ) }) CarouselPrevious.displayName = "CarouselPrevious" const CarouselNext = React.forwardRef< HTMLButtonElement, React.ComponentProps >(({ className, variant = "outline", size = "icon", ...props }, ref) => { const { orientation, scrollNext, canScrollNext } = useCarousel() return ( ) }) CarouselNext.displayName = "CarouselNext" export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, } [V0_FILE]typescriptreact:file="components/ui/chart.tsx" isMerged="true" "use client" import * as React from "react" import * as RechartsPrimitive from "recharts" import { cn } from "@/lib/utils" // Format: { THEME_NAME: CSS_SELECTOR } const THEMES = { light: "", dark: ".dark" } as const export type ChartConfig = { [k in string]: { label?: React.ReactNode icon?: React.ComponentType } & ( | { color?: string; theme?: never } | { color?: never; theme: Record } ) } type ChartContextProps = { config: ChartConfig } const ChartContext = React.createContext(null) function useChart() { const context = React.useContext(ChartContext) if (!context) { throw new Error("useChart must be used within a ") } return context } const ChartContainer = React.forwardRef< HTMLDivElement, React.ComponentProps<"div"> & { config: ChartConfig children: React.ComponentProps< typeof RechartsPrimitive.ResponsiveContainer >["children"] } >(({ id, className, children, config, ...props }, ref) => { const uniqueId = React.useId() const chartId = `chart-${id || uniqueId.replace(/:/g, "")}` return (
{children}
) }) ChartContainer.displayName = "Chart" const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => { const colorConfig = Object.entries(config).filter( ([_, config]) => config.theme || config.color ) if (!colorConfig.length) { return null } return (