Wan2.1/wan-pwa/apps/web/src/components/ui/card.tsx
Claude e8fda73741
feat: Add complete Wan2.1 PWA - AI Video Generation Platform
This commit adds a production-ready Progressive Web App for AI-powered video
generation using Wan2.1 models.

Features:
- Next.js 15 frontend with App Router and PWA support
- FastAPI backend with Replicate integration
- 50+ prompt templates across 7 categories
- Supabase authentication and database
- Credit system with usage tracking
- Text-to-Video and Image-to-Video generation
- Complete documentation (setup, deployment, contributing)

Project Structure:
- apps/web: Next.js frontend with shadcn/ui components
- apps/api: FastAPI backend with GPU processing via Replicate
- packages/db: Database schema and migrations for Supabase

Tech Stack:
- Frontend: Next.js 15, shadcn/ui, Tailwind, Zustand, React Hook Form, Zod
- Backend: FastAPI, Replicate, Supabase
- Database: Supabase (Postgres) with RLS
- Infrastructure: Turborepo monorepo, Vercel/Modal deployment

Documentation:
- README.md: Project overview and features
- SETUP.md: Complete setup guide (5-minute quickstart)
- DEPLOYMENT.md: Production deployment instructions
- CONTRIBUTING.md: Contribution guidelines
- PROJECT_SUMMARY.md: Comprehensive project documentation

Ready for development and deployment.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-24 14:18:18 +00:00

50 lines
1.8 KiB
TypeScript

import * as React from "react"
import { cn } from "@/lib/utils"
const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}
{...props}
/>
)
)
Card.displayName = "Card"
const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
({ className, ...props }, ref) => (
<div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
)
)
CardHeader.displayName = "CardHeader"
const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
({ className, ...props }, ref) => (
<h3 ref={ref} className={cn("text-2xl font-semibold leading-none tracking-tight", className)} {...props} />
)
)
CardTitle.displayName = "CardTitle"
const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
({ className, ...props }, ref) => (
<p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
)
)
CardDescription.displayName = "CardDescription"
const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
)
CardContent.displayName = "CardContent"
const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
({ className, ...props }, ref) => (
<div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
)
)
CardFooter.displayName = "CardFooter"
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }