mirror of
https://github.com/soconnor0919/beenvoice.git
synced 2026-02-05 00:06:36 -05:00
refactor: improve invoice editor UX and fix visual issues
- Remove clock icons and hour text from calendar month view, show only activity bars - Fix calendar week view mobile layout (2-column grid instead of vertical stack) - Update invoice form skeleton to match actual layout structure - Add client-side validation for empty invoice item descriptions with auto-scroll to error - Fix hourly rate defaulting logic with proper type guards - Update invoice details skeleton to match page structure with PageHeader - Fix hydration error in sidebar (div inside button -> span) - Improve dashboard chart color consistency (draft status now matches monthly metrics) - Fix mobile header layout to prevent text squishing (vertical stack on mobile) - Add IDs to invoice line items for scroll-into-view functionality
This commit is contained in:
@@ -48,18 +48,24 @@ function SignInForm() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-background flex min-h-screen items-center justify-center">
|
||||
<Card className="mx-auto h-screen w-full overflow-hidden border-0 shadow-none md:h-auto md:max-w-6xl md:border md:shadow-lg">
|
||||
<div className="flex min-h-screen items-center justify-center relative overflow-hidden">
|
||||
{/* Blob Background */}
|
||||
<div className="fixed inset-0 -z-10 overflow-hidden pointer-events-none flex items-center justify-center">
|
||||
<div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"></div>
|
||||
<div className="w-[800px] h-[800px] bg-neutral-400/30 dark:bg-neutral-500/20 rounded-full blur-3xl animate-blob"></div>
|
||||
</div>
|
||||
|
||||
<Card className="mx-auto h-screen w-full overflow-hidden border-0 shadow-none md:h-auto md:max-w-6xl md:border md:shadow-2xl md:bg-background/80 md:backdrop-blur-xl md:border-border/50 md:rounded-3xl">
|
||||
<CardContent className="grid h-full p-0 md:grid-cols-2">
|
||||
{/* Hero Section - Hidden on mobile */}
|
||||
<div className="bg-muted relative hidden md:flex md:flex-col md:justify-center md:p-12">
|
||||
<div className="bg-primary/5 relative hidden md:flex md:flex-col md:justify-center md:p-12 border-r border-border/50">
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-4">
|
||||
<Logo size="xl" />
|
||||
<div className="space-y-3">
|
||||
<h1 className="text-3xl font-bold lg:text-4xl">
|
||||
<h1 className="text-3xl font-bold lg:text-4xl font-heading">
|
||||
Welcome back to your
|
||||
<span className="text-primary"> invoicing workspace</span>
|
||||
<span className="text-primary italic"> invoicing workspace</span>
|
||||
</h1>
|
||||
<p className="text-muted-foreground text-lg">
|
||||
Continue managing your clients and creating professional
|
||||
@@ -68,13 +74,13 @@ function SignInForm() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4">
|
||||
<div className="grid gap-6">
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="bg-primary/10 rounded-lg p-2">
|
||||
<div className="bg-primary/10 rounded-xl p-3">
|
||||
<Users className="text-primary h-5 w-5" />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<h3 className="font-semibold">Client Management</h3>
|
||||
<h3 className="font-semibold text-foreground">Client Management</h3>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Organize and track all your clients in one place
|
||||
</p>
|
||||
@@ -82,11 +88,11 @@ function SignInForm() {
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="bg-primary/10 rounded-lg p-2">
|
||||
<div className="bg-primary/10 rounded-xl p-3">
|
||||
<FileText className="text-primary h-5 w-5" />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<h3 className="font-semibold">Professional Invoices</h3>
|
||||
<h3 className="font-semibold text-foreground">Professional Invoices</h3>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Beautiful templates that get you paid faster
|
||||
</p>
|
||||
@@ -94,11 +100,11 @@ function SignInForm() {
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="bg-primary/10 rounded-lg p-2">
|
||||
<div className="bg-primary/10 rounded-xl p-3">
|
||||
<TrendingUp className="text-primary h-5 w-5" />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<h3 className="font-semibold">Payment Tracking</h3>
|
||||
<h3 className="font-semibold text-foreground">Payment Tracking</h3>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Monitor your income with real-time insights
|
||||
</p>
|
||||
@@ -117,7 +123,7 @@ function SignInForm() {
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 text-center md:text-left">
|
||||
<h1 className="text-2xl font-bold">Sign In</h1>
|
||||
<h1 className="text-3xl font-bold font-heading">Sign In</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Enter your credentials to access your account
|
||||
</p>
|
||||
@@ -135,7 +141,7 @@ function SignInForm() {
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
autoFocus
|
||||
className="h-11 pl-10"
|
||||
className="h-11 pl-10 bg-background/50 border-border/60 focus:bg-background transition-all"
|
||||
placeholder="m@example.com"
|
||||
/>
|
||||
</div>
|
||||
@@ -159,7 +165,7 @@ function SignInForm() {
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
className="h-11 pl-10"
|
||||
className="h-11 pl-10 bg-background/50 border-border/60 focus:bg-background transition-all"
|
||||
placeholder="Enter your password"
|
||||
/>
|
||||
</div>
|
||||
@@ -167,7 +173,7 @@ function SignInForm() {
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="h-11 w-full"
|
||||
className="h-11 w-full rounded-xl text-base shadow-lg shadow-primary/20 hover:shadow-primary/30"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? (
|
||||
|
||||
@@ -46,11 +46,11 @@ export function InvoiceStatusChart({ invoices }: InvoiceStatusChartProps) {
|
||||
|
||||
// Use theme-aware colors
|
||||
const COLORS = {
|
||||
draft: "hsl(0, 0%, 60%)", // grey
|
||||
sent: "hsl(214, 100%, 50%)", // blue
|
||||
pending: "hsl(45, 100%, 50%)", // yellow
|
||||
paid: "hsl(142, 76%, 36%)", // green
|
||||
overdue: "hsl(0, 84%, 60%)", // red
|
||||
draft: "hsl(0, 0%, 60%)", // neutral grey - matches monthly metrics chart
|
||||
sent: "hsl(217, 91%, 60%)", // vibrant blue
|
||||
pending: "hsl(217, 91%, 60%)", // blue
|
||||
paid: "hsl(142, 71%, 45%)", // vibrant green
|
||||
overdue: "hsl(var(--destructive))", // red
|
||||
};
|
||||
// Animation / motion preferences
|
||||
const { prefersReducedMotion, animationSpeedMultiplier } =
|
||||
|
||||
@@ -118,17 +118,17 @@ export function MonthlyMetricsChart({ invoices }: MonthlyMetricsChartProps) {
|
||||
<div className="bg-card border-border rounded-lg border p-3 shadow-lg">
|
||||
<p className="font-medium">{label}</p>
|
||||
<div className="space-y-1 text-sm">
|
||||
<p style={{ color: "var(--chart-2)" }}>Paid: {data.paidInvoices}</p>
|
||||
<p style={{ color: "var(--chart-1)" }}>
|
||||
<p className="text-primary font-medium">Paid: {data.paidInvoices}</p>
|
||||
<p className="text-primary/80">
|
||||
Pending: {data.pendingInvoices}
|
||||
</p>
|
||||
<p style={{ color: "var(--chart-3)" }}>
|
||||
<p className="text-destructive">
|
||||
Overdue: {data.overdueInvoices}
|
||||
</p>
|
||||
<p style={{ color: "hsl(0, 0%, 60%)" }}>
|
||||
<p className="text-muted-foreground">
|
||||
Draft: {data.draftInvoices}
|
||||
</p>
|
||||
<p className="text-muted-foreground border-t pt-1">
|
||||
<p className="text-foreground font-medium border-t pt-1">
|
||||
Total: {data.totalInvoices}
|
||||
</p>
|
||||
</div>
|
||||
@@ -182,7 +182,7 @@ export function MonthlyMetricsChart({ invoices }: MonthlyMetricsChartProps) {
|
||||
<Bar
|
||||
dataKey="paidInvoices"
|
||||
stackId="a"
|
||||
fill="var(--chart-2)"
|
||||
fill="hsl(142, 71%, 45%)"
|
||||
radius={[0, 0, 0, 0]}
|
||||
isAnimationActive={!prefersReducedMotion}
|
||||
animationDuration={barAnimationDuration}
|
||||
@@ -191,7 +191,8 @@ export function MonthlyMetricsChart({ invoices }: MonthlyMetricsChartProps) {
|
||||
<Bar
|
||||
dataKey="pendingInvoices"
|
||||
stackId="a"
|
||||
fill="var(--chart-1)"
|
||||
fill="hsl(217, 91%, 60%)"
|
||||
fillOpacity={0.6}
|
||||
radius={[0, 0, 0, 0]}
|
||||
isAnimationActive={!prefersReducedMotion}
|
||||
animationDuration={barAnimationDuration}
|
||||
@@ -200,7 +201,7 @@ export function MonthlyMetricsChart({ invoices }: MonthlyMetricsChartProps) {
|
||||
<Bar
|
||||
dataKey="overdueInvoices"
|
||||
stackId="a"
|
||||
fill="var(--chart-3)"
|
||||
fill="hsl(var(--destructive))"
|
||||
radius={[2, 2, 0, 0]}
|
||||
isAnimationActive={!prefersReducedMotion}
|
||||
animationDuration={barAnimationDuration}
|
||||
@@ -222,21 +223,20 @@ export function MonthlyMetricsChart({ invoices }: MonthlyMetricsChartProps) {
|
||||
<div className="flex items-center space-x-2">
|
||||
<div
|
||||
className="h-3 w-3 rounded-full"
|
||||
style={{ backgroundColor: "var(--chart-2)" }}
|
||||
style={{ backgroundColor: "hsl(142, 71%, 45%)" }}
|
||||
/>
|
||||
<span className="text-xs">Paid</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div
|
||||
className="h-3 w-3 rounded-full"
|
||||
style={{ backgroundColor: "var(--chart-1)" }}
|
||||
style={{ backgroundColor: "hsl(217, 91%, 60%)", opacity: 0.6 }}
|
||||
/>
|
||||
<span className="text-xs">Pending</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div
|
||||
className="h-3 w-3 rounded-full"
|
||||
style={{ backgroundColor: "var(--chart-3)" }}
|
||||
className="h-3 w-3 rounded-full bg-destructive"
|
||||
/>
|
||||
<span className="text-xs">Overdue</span>
|
||||
</div>
|
||||
|
||||
@@ -88,10 +88,10 @@ export function RevenueChart({ data }: RevenueChartProps) {
|
||||
<AreaChart data={chartData}>
|
||||
<defs>
|
||||
<linearGradient id="revenueGradient" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="hsl(0, 0%, 60%)" stopOpacity={0.4} />
|
||||
<stop offset="5%" stopColor="hsl(217, 91%, 60%)" stopOpacity={0.4} />
|
||||
<stop
|
||||
offset="95%"
|
||||
stopColor="hsl(0, 0%, 60%)"
|
||||
stopColor="hsl(217, 91%, 60%)"
|
||||
stopOpacity={0.05}
|
||||
/>
|
||||
</linearGradient>
|
||||
@@ -100,19 +100,19 @@ export function RevenueChart({ data }: RevenueChartProps) {
|
||||
dataKey="monthLabel"
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fontSize: 12, fill: "var(--muted-foreground)" }}
|
||||
tick={{ fontSize: 12, fill: "hsl(var(--muted-foreground))" }}
|
||||
/>
|
||||
<YAxis
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fontSize: 12, fill: "var(--muted-foreground)" }}
|
||||
tick={{ fontSize: 12, fill: "hsl(var(--muted-foreground))" }}
|
||||
tickFormatter={formatCurrency}
|
||||
/>
|
||||
<Tooltip content={<CustomTooltip />} />
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="revenue"
|
||||
stroke="hsl(0, 0%, 60%)"
|
||||
stroke="hsl(217, 91%, 60%)"
|
||||
strokeWidth={2}
|
||||
fill="url(#revenueGradient)"
|
||||
isAnimationActive={!prefersReducedMotion}
|
||||
|
||||
@@ -1,44 +1,45 @@
|
||||
import { Card, CardContent, CardHeader } from "~/components/ui/card";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
|
||||
import { Separator } from "~/components/ui/separator";
|
||||
import { Skeleton } from "~/components/ui/skeleton";
|
||||
import { PageHeader } from "~/components/layout/page-header";
|
||||
|
||||
export function InvoiceDetailsSkeleton() {
|
||||
return (
|
||||
<div className="space-y-6 pb-24">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Skeleton className="bg-muted/30 h-8 w-48 sm:h-9 sm:w-64" />
|
||||
<Skeleton className="bg-muted/30 mt-1 h-4 w-40 sm:w-48" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Skeleton className="bg-muted/30 h-8 w-20 sm:h-9 sm:w-24" />
|
||||
<Skeleton className="bg-muted/30 h-8 w-16 sm:h-9 sm:w-20" />
|
||||
</div>
|
||||
</div>
|
||||
<PageHeader
|
||||
title="Loading..."
|
||||
description="View and manage invoice information"
|
||||
variant="gradient"
|
||||
>
|
||||
<Skeleton className="h-10 w-10 sm:w-32" />
|
||||
<Skeleton className="h-10 w-24" />
|
||||
</PageHeader>
|
||||
|
||||
{/* Content */}
|
||||
<div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
||||
{/* Left Column */}
|
||||
<div className="space-y-6 lg:col-span-2">
|
||||
{/* Invoice Header Skeleton */}
|
||||
<Card className="bg-card border-border border">
|
||||
<Card>
|
||||
<CardContent className="p-4 sm:p-6">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start justify-between gap-6">
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between sm:gap-6">
|
||||
<div className="min-w-0 flex-1 space-y-2">
|
||||
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3">
|
||||
<Skeleton className="bg-muted/30 h-6 w-40 sm:h-8 sm:w-48" />
|
||||
<Skeleton className="bg-muted/30 h-5 w-16 sm:h-6" />
|
||||
<Skeleton className="h-8 w-48" />
|
||||
<Skeleton className="h-6 w-24 rounded-full" />
|
||||
</div>
|
||||
<div className="space-y-1 sm:space-y-0">
|
||||
<Skeleton className="bg-muted/30 h-3 w-32 sm:h-4 sm:w-40" />
|
||||
<Skeleton className="bg-muted/30 h-3 w-28 sm:hidden sm:h-4 sm:w-36" />
|
||||
<div className="space-y-1 sm:space-y-0 text-sm">
|
||||
<div className="flex gap-2">
|
||||
<Skeleton className="h-4 w-32" />
|
||||
<Skeleton className="h-4 w-32 hidden sm:block" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-shrink-0 text-right">
|
||||
<Skeleton className="bg-muted/30 h-3 w-20 sm:h-4" />
|
||||
<Skeleton className="bg-muted/30 mt-1 h-6 w-24 sm:h-8 sm:w-28" />
|
||||
<div className="flex-shrink-0 text-left sm:text-right">
|
||||
<Skeleton className="h-4 w-24 mb-1 sm:ml-auto" />
|
||||
<Skeleton className="h-9 w-32 sm:ml-auto" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -47,105 +48,126 @@ export function InvoiceDetailsSkeleton() {
|
||||
|
||||
{/* Client & Business Info */}
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
{Array.from({ length: 2 }).map((_, i) => (
|
||||
<Card key={i} className="bg-card border-border border">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Skeleton className="bg-muted/30 h-4 w-4 sm:h-5 sm:w-5" />
|
||||
<Skeleton className="bg-muted/30 h-5 w-16 sm:h-6" />
|
||||
{/* Client Skeleton */}
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Skeleton className="h-5 w-5 rounded-full" />
|
||||
<Skeleton className="h-5 w-16" />
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<Skeleton className="h-7 w-48" />
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<Skeleton className="h-8 w-8 rounded-md" />
|
||||
<Skeleton className="h-4 w-40" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<Skeleton className="bg-muted/30 h-5 w-32 sm:h-6" />
|
||||
<div className="space-y-3">
|
||||
{Array.from({ length: 3 }).map((_, j) => (
|
||||
<div key={j} className="flex items-center gap-3">
|
||||
<Skeleton className="bg-muted/30 h-8 w-8 " />
|
||||
<Skeleton className="bg-muted/30 h-4 w-28" />
|
||||
</div>
|
||||
))}
|
||||
<div className="flex items-center gap-3">
|
||||
<Skeleton className="h-8 w-8 rounded-md" />
|
||||
<Skeleton className="h-4 w-32" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
<div className="flex items-center gap-3">
|
||||
<Skeleton className="h-8 w-8 rounded-md" />
|
||||
<div className="space-y-1">
|
||||
<Skeleton className="h-4 w-48" />
|
||||
<Skeleton className="h-4 w-32" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Business Skeleton */}
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Skeleton className="h-5 w-5 rounded-full" />
|
||||
<Skeleton className="h-5 w-16" />
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<Skeleton className="h-7 w-48" />
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<Skeleton className="h-8 w-8 rounded-md" />
|
||||
<Skeleton className="h-4 w-40" />
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Skeleton className="h-8 w-8 rounded-md" />
|
||||
<Skeleton className="h-4 w-32" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Invoice Items Skeleton */}
|
||||
<Card className="bg-card border-border border">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<Skeleton className="bg-muted/30 h-4 w-4 sm:h-5 sm:w-5" />
|
||||
<Skeleton className="bg-muted/30 h-5 w-28 sm:h-6" />
|
||||
</div>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Skeleton className="h-5 w-5 rounded-full" />
|
||||
<Skeleton className="h-5 w-32" />
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* Item Rows */}
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<div key={i} className="space-y-3 border p-4">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="min-w-0 flex-1">
|
||||
<Skeleton className="bg-muted/30 mb-2 h-4 w-full sm:h-5 sm:w-3/4" />
|
||||
<div className="space-y-1 sm:space-y-0">
|
||||
<Skeleton className="bg-muted/30 h-3 w-20 sm:h-4 sm:w-24" />
|
||||
<Skeleton className="bg-muted/30 h-3 w-16 sm:hidden sm:h-4 sm:w-20" />
|
||||
<Skeleton className="bg-muted/30 h-3 w-24 sm:hidden sm:h-4 sm:w-28" />
|
||||
<Card key={i} className="bg-secondary/50 border-0">
|
||||
<CardContent className="p-3">
|
||||
<div className="space-y-3">
|
||||
<div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div className="min-w-0 flex-1">
|
||||
<Skeleton className="h-5 w-3/4 mb-2" />
|
||||
<div className="flex gap-4">
|
||||
<Skeleton className="h-4 w-24" />
|
||||
<Skeleton className="h-4 w-16" />
|
||||
<Skeleton className="h-4 w-20" />
|
||||
</div>
|
||||
</div>
|
||||
<Skeleton className="h-6 w-24" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-shrink-0 text-right">
|
||||
<Skeleton className="bg-muted/30 h-4 w-16 sm:h-5 sm:w-20" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
|
||||
{/* Totals */}
|
||||
<div className="bg-muted/30 p-4">
|
||||
<div className="bg-secondary rounded-lg p-4">
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between">
|
||||
<Skeleton className="bg-muted/30 h-4 w-16" />
|
||||
<Skeleton className="bg-muted/30 h-4 w-20" />
|
||||
<Skeleton className="h-4 w-20" />
|
||||
<Skeleton className="h-4 w-24" />
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<Skeleton className="bg-muted/30 h-4 w-20" />
|
||||
<Skeleton className="bg-muted/30 h-4 w-16" />
|
||||
<Skeleton className="h-4 w-24" />
|
||||
<Skeleton className="h-4 w-24" />
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="flex justify-between">
|
||||
<Skeleton className="bg-muted/30 h-5 w-12" />
|
||||
<Skeleton className="bg-muted/30 h-5 w-24" />
|
||||
<Skeleton className="h-6 w-16" />
|
||||
<Skeleton className="h-6 w-32" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Notes */}
|
||||
<Card className="bg-card border-border border">
|
||||
<CardHeader>
|
||||
<Skeleton className="bg-muted/30 h-6 w-16" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="bg-muted/30 h-4 w-full" />
|
||||
<Skeleton className="bg-muted/30 h-4 w-3/4" />
|
||||
<Skeleton className="bg-muted/30 h-4 w-1/2" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Actions */}
|
||||
<div className="space-y-6">
|
||||
<Card className="bg-card border-border border sticky top-6">
|
||||
<Card className="sticky top-20">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<Skeleton className="bg-muted/30 h-5 w-5" />
|
||||
<Skeleton className="bg-muted/30 h-6 w-16" />
|
||||
</div>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Skeleton className="h-5 w-5 rounded-full" />
|
||||
<Skeleton className="h-5 w-24" />
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<Skeleton key={i} className="bg-muted/30 h-10 w-full" />
|
||||
))}
|
||||
<Skeleton className="h-10 w-full" />
|
||||
<Skeleton className="h-10 w-full" />
|
||||
<Skeleton className="h-10 w-full" />
|
||||
<Skeleton className="h-10 w-full" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
import "~/styles/globals.css";
|
||||
|
||||
import { type Metadata } from "next";
|
||||
import { Geist, Geist_Mono, Instrument_Serif } from "next/font/google";
|
||||
import { Inter, Playfair_Display, Geist_Mono } from "next/font/google";
|
||||
|
||||
import { TRPCReactProvider } from "~/trpc/react";
|
||||
import { Toaster } from "~/components/ui/sonner";
|
||||
import { AnimationPreferencesProvider } from "~/components/providers/animation-preferences-provider";
|
||||
import { MotionBackground } from "~/components/layout/motion-background";
|
||||
|
||||
import { ThemeProvider } from "~/components/providers/theme-provider";
|
||||
import { ColorThemeProvider } from "~/components/providers/color-theme-provider";
|
||||
import { UmamiScript } from "~/components/analytics/umami-script";
|
||||
@@ -19,9 +17,15 @@ export const metadata: Metadata = {
|
||||
icons: [{ rel: "icon", url: "/favicon.ico" }],
|
||||
};
|
||||
|
||||
const geistSans = Geist({
|
||||
const inter = Inter({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-geist-sans",
|
||||
variable: "--font-sans",
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
const playfair = Playfair_Display({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-heading",
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
@@ -31,13 +35,6 @@ const geistMono = Geist_Mono({
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
const instrumentSerif = Instrument_Serif({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-serif",
|
||||
display: "swap",
|
||||
weight: "400",
|
||||
});
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{ children: React.ReactNode }>) {
|
||||
@@ -45,105 +42,21 @@ export default function RootLayout({
|
||||
<html
|
||||
suppressHydrationWarning
|
||||
lang="en"
|
||||
className={`${geistSans.variable} ${geistMono.variable} ${instrumentSerif.variable}`}
|
||||
className={`${inter.variable} ${playfair.variable} ${geistMono.variable}`}
|
||||
>
|
||||
<head>
|
||||
{/* Inline early theme and animation preference script to avoid FOUC */}
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `(function(){
|
||||
try {
|
||||
var root = document.documentElement;
|
||||
|
||||
// Mode theme persistence (light/dark/system)
|
||||
var modeTheme = localStorage.getItem('theme');
|
||||
var systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
|
||||
root.classList.remove('light', 'dark');
|
||||
|
||||
if (modeTheme === 'dark' || modeTheme === 'light') {
|
||||
root.classList.add(modeTheme);
|
||||
} else {
|
||||
// Default to system if no preference or 'system'
|
||||
root.classList.add(systemTheme);
|
||||
}
|
||||
|
||||
// Color theme persistence (custom accent colors)
|
||||
var customColor = localStorage.getItem('customThemeColor');
|
||||
var isCustom = localStorage.getItem('isCustomTheme') === 'true';
|
||||
|
||||
if (isCustom && customColor) {
|
||||
try {
|
||||
var themeData = JSON.parse(customColor);
|
||||
if (themeData && themeData.colors && themeData.colors.light) {
|
||||
// Apply saved colors directly
|
||||
for (var key in themeData.colors.light) {
|
||||
if (themeData.colors.light.hasOwnProperty(key)) {
|
||||
root.style.setProperty(key, themeData.colors.light[key]);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
// Fallback logic omitted for brevity, relying on provider for full recovery
|
||||
}
|
||||
} else {
|
||||
// Apply preset color theme
|
||||
var colorTheme = localStorage.getItem('color-theme');
|
||||
if (colorTheme) {
|
||||
root.classList.add(colorTheme);
|
||||
} else {
|
||||
root.classList.add('slate'); // Default
|
||||
}
|
||||
}
|
||||
|
||||
// Animation preferences script (existing)
|
||||
var STORAGE_KEY='bv.animation.prefs';
|
||||
var raw=localStorage.getItem(STORAGE_KEY);
|
||||
var prefersReduced=false;
|
||||
var speed=1;
|
||||
if(raw){
|
||||
try{
|
||||
var parsed=JSON.parse(raw);
|
||||
if(typeof parsed.prefersReducedMotion==='boolean'){
|
||||
prefersReduced=parsed.prefersReducedMotion;
|
||||
}else{
|
||||
prefersReduced=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
}
|
||||
if(typeof parsed.animationSpeedMultiplier==='number'){
|
||||
speed=parsed.animationSpeedMultiplier;
|
||||
if(isNaN(speed)||speed<0.25||speed>4)speed=1;
|
||||
}
|
||||
}catch(e){}
|
||||
}else{
|
||||
prefersReduced=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
}
|
||||
|
||||
if(prefersReduced)root.classList.add('user-reduce-motion');
|
||||
function apply(fast,normal,slow){
|
||||
root.style.setProperty('--animation-speed-fast',fast+'s');
|
||||
root.style.setProperty('--animation-speed-normal',normal+'s');
|
||||
root.style.setProperty('--animation-speed-slow',slow+'s');
|
||||
}
|
||||
if(prefersReduced){
|
||||
apply(0.01,0.01,0.01);
|
||||
}else{
|
||||
var fast=(0.15/speed).toFixed(4);
|
||||
var normal=(0.30/speed).toFixed(4);
|
||||
var slow=(0.50/speed).toFixed(4);
|
||||
apply(fast,normal,slow);
|
||||
}
|
||||
} catch(_e) {}
|
||||
})();`,
|
||||
}}
|
||||
/>
|
||||
</head>
|
||||
<body className="bg-background text-foreground relative min-h-screen overflow-x-hidden font-sans antialiased">
|
||||
<div className="fixed inset-0 -z-10 overflow-hidden pointer-events-none flex items-center justify-center">
|
||||
<div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"></div>
|
||||
<div className="w-[800px] h-[800px] bg-neutral-400/40 dark:bg-neutral-500/30 rounded-full blur-3xl animate-blob"></div>
|
||||
</div>
|
||||
|
||||
<TRPCReactProvider>
|
||||
<ThemeProvider>
|
||||
<ColorThemeProvider>
|
||||
<AnimationPreferencesProvider>
|
||||
<MotionBackground />
|
||||
{children}
|
||||
<div className="relative z-10">
|
||||
{children}
|
||||
</div>
|
||||
</AnimationPreferencesProvider>
|
||||
<Toaster />
|
||||
<UmamiScript />
|
||||
|
||||
391
src/app/page.tsx
391
src/app/page.tsx
@@ -16,15 +16,21 @@ import {
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<div className="bg-background min-h-screen">
|
||||
<div className="min-h-screen relative overflow-x-hidden">
|
||||
<AuthRedirect />
|
||||
|
||||
{/* Blob Background for Homepage */}
|
||||
<div className="fixed inset-0 -z-10 overflow-hidden pointer-events-none flex items-center justify-center">
|
||||
<div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"></div>
|
||||
<div className="w-[800px] h-[800px] bg-neutral-400/30 dark:bg-neutral-500/20 rounded-full blur-3xl animate-blob"></div>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="bg-background border-border sticky top-0 z-50 border-b">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex h-14 items-center justify-between sm:h-16">
|
||||
<nav className="fixed top-4 left-4 right-4 z-50 m-4 rounded-2xl border border-border/60 bg-background/80 backdrop-blur-md">
|
||||
<div className="mx-auto px-6">
|
||||
<div className="flex h-16 items-center justify-between">
|
||||
<Logo />
|
||||
<div className="hidden items-center space-x-6 md:flex">
|
||||
<div className="hidden items-center space-x-8 md:flex">
|
||||
<a
|
||||
href="#features"
|
||||
className="text-muted-foreground hover:text-foreground text-sm font-medium transition-colors"
|
||||
@@ -38,21 +44,19 @@ export default function HomePage() {
|
||||
Pricing
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Link href="/auth/signin">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<span className="hidden sm:inline">Sign In</span>
|
||||
<span className="sm:hidden">Sign In</span>
|
||||
Sign In
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/auth/register">
|
||||
<Button size="sm" variant="default">
|
||||
<span className="hidden sm:inline">Get Started</span>
|
||||
<span className="sm:hidden">Start</span>
|
||||
<Button size="sm" variant="default" className="rounded-xl px-6">
|
||||
Get Started
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
@@ -61,248 +65,156 @@ export default function HomePage() {
|
||||
</nav>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="bg-background relative overflow-hidden px-4 pt-12 pb-16 sm:pt-20">
|
||||
<div className="relative container mx-auto text-center">
|
||||
<section className="relative pt-48 pb-32">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
<div className="mx-auto max-w-4xl">
|
||||
<Badge className="bg-primary/10 text-primary border-primary/20 mb-4 border sm:mb-6">
|
||||
<Zap className="mr-1 h-3 w-3" />
|
||||
Free Forever
|
||||
<Badge className="bg-primary/10 text-primary border-primary/20 mb-8 border px-4 py-1 text-sm rounded-full">
|
||||
<Zap className="mr-2 h-3.5 w-3.5" />
|
||||
Completely Free for Everyone
|
||||
</Badge>
|
||||
|
||||
<h1 className="text-foreground mb-4 text-4xl font-bold tracking-tight sm:mb-6 sm:text-6xl lg:text-7xl">
|
||||
Simple Invoicing for
|
||||
<span className="text-primary block">Freelancers</span>
|
||||
<h1 className="text-foreground mb-8 text-6xl font-heading font-bold tracking-tight sm:text-7xl lg:text-8xl leading-tight">
|
||||
Invoicing Made <br />
|
||||
<span className="text-primary italic">Beautifully Simple.</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-muted-foreground mx-auto mb-6 max-w-2xl text-lg leading-relaxed sm:mb-8 sm:text-xl">
|
||||
Create professional invoices, manage clients, and track payments.
|
||||
Built for freelancers and small businesses—
|
||||
<span className="text-foreground font-semibold">
|
||||
completely free
|
||||
</span>
|
||||
.
|
||||
<p className="text-muted-foreground mx-auto mb-12 max-w-2xl text-xl leading-relaxed font-sans">
|
||||
Create professional invoices, manage clients, and track payments with a tool that feels as good as it looks.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
|
||||
<div className="flex flex-col items-center gap-6 sm:flex-row sm:justify-center">
|
||||
<Link href="/auth/register">
|
||||
<Button
|
||||
size="lg"
|
||||
variant="default"
|
||||
className="group w-full px-6 py-3 text-base font-semibold sm:w-auto sm:px-8 sm:py-4 sm:text-lg"
|
||||
className="h-14 px-10 text-lg rounded-2xl shadow-xl shadow-primary/20 hover:shadow-2xl hover:shadow-primary/30 transition-all duration-300"
|
||||
>
|
||||
Get Started
|
||||
<ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1 sm:h-5 sm:w-5" />
|
||||
Start For Free
|
||||
<ArrowRight className="ml-2 h-5 w-5" />
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="#features">
|
||||
<a href="#features">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
className="group w-full px-6 py-3 text-base sm:w-auto sm:px-8 sm:py-4 sm:text-lg"
|
||||
className="h-14 px-10 text-lg rounded-2xl border-border/50 bg-background/50 hover:bg-background/80 backdrop-blur-sm"
|
||||
>
|
||||
Learn More
|
||||
<ChevronRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1 sm:h-5 sm:w-5" />
|
||||
</Button>
|
||||
</Link>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="text-muted-foreground mt-8 flex flex-col items-center justify-center gap-2 text-sm sm:mt-12 sm:flex-row sm:gap-6">
|
||||
{[
|
||||
"No credit card required",
|
||||
"Setup in 2 minutes",
|
||||
"Free forever",
|
||||
].map((text, i) => (
|
||||
<div key={i} className="flex items-center gap-2">
|
||||
<Check className="text-primary h-4 w-4" />
|
||||
<span className="text-center">{text}</span>
|
||||
</div>
|
||||
))}
|
||||
<div className="mt-16 text-muted-foreground/80 flex flex-col items-center justify-center gap-2 text-sm sm:flex-row sm:gap-8">
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="text-primary h-4 w-4" />
|
||||
<span>No credit card required</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="text-primary h-4 w-4" />
|
||||
<span>Setup in 2 minutes</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="text-primary h-4 w-4" />
|
||||
<span>Free forever</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section
|
||||
id="features"
|
||||
className="bg-muted/20 relative overflow-hidden py-16 sm:py-24"
|
||||
>
|
||||
<div className="relative container mx-auto px-4">
|
||||
<div className="mb-12 text-center sm:mb-16">
|
||||
<Badge className="bg-primary/10 text-primary border-primary/20 mb-4 border">
|
||||
<Zap className="mr-1 h-3 w-3" />
|
||||
Features
|
||||
</Badge>
|
||||
<h2 className="text-foreground mb-4 text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl">
|
||||
Everything you need to
|
||||
<span className="text-primary block">get paid</span>
|
||||
<section id="features" className="py-24 relative">
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
<div className="mb-20 text-center">
|
||||
<h2 className="text-foreground mb-6 text-4xl font-heading font-bold sm:text-5xl">
|
||||
Everything you need to <span className="italic text-primary">thrive</span>
|
||||
</h2>
|
||||
<p className="text-muted-foreground mx-auto max-w-2xl text-lg sm:text-xl">
|
||||
Simple, powerful features for freelancers and small businesses.
|
||||
<p className="text-muted-foreground mx-auto max-w-2xl text-lg">
|
||||
Powerful features wrapped in a calm, focused interface.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 sm:gap-8 md:grid-cols-2 lg:grid-cols-3">
|
||||
{/* Feature 1 */}
|
||||
<Card className="bg-card border-border hover:border-primary/20 border transition-all">
|
||||
<CardContent className="p-6 sm:p-8">
|
||||
<div className="bg-primary/10 text-primary mb-4 inline-flex p-3">
|
||||
<Rocket className="h-6 w-6" />
|
||||
</div>
|
||||
<h3 className="text-foreground mb-3 text-xl font-bold">
|
||||
Quick Setup
|
||||
</h3>
|
||||
<p className="text-muted-foreground mb-4">
|
||||
Start creating invoices immediately. No complicated setup
|
||||
required.
|
||||
</p>
|
||||
<ul className="space-y-2">
|
||||
<li className="flex items-center gap-2">
|
||||
<Check className="text-primary h-4 w-4" />
|
||||
<span className="text-muted-foreground text-sm">
|
||||
Simple client management
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Check className="text-primary h-4 w-4" />
|
||||
<span className="text-muted-foreground text-sm">
|
||||
Professional templates
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Check className="text-primary h-4 w-4" />
|
||||
<span className="text-muted-foreground text-sm">
|
||||
Easy invoice sending
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Feature 2 */}
|
||||
<Card className="bg-card border-border hover:border-primary/20 border transition-all">
|
||||
<CardContent className="p-6 sm:p-8">
|
||||
<div className="bg-primary/10 text-primary mb-4 inline-flex p-3">
|
||||
<BarChart3 className="h-6 w-6" />
|
||||
</div>
|
||||
<h3 className="text-foreground mb-3 text-xl font-bold">
|
||||
Payment Tracking
|
||||
</h3>
|
||||
<p className="text-muted-foreground mb-4">
|
||||
Keep track of invoice status and monitor payments.
|
||||
</p>
|
||||
<ul className="space-y-2">
|
||||
<li className="flex items-center gap-2">
|
||||
<Check className="text-primary h-4 w-4" />
|
||||
<span className="text-muted-foreground text-sm">
|
||||
Invoice status tracking
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Check className="text-primary h-4 w-4" />
|
||||
<span className="text-muted-foreground text-sm">
|
||||
Payment history
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Check className="text-primary h-4 w-4" />
|
||||
<span className="text-muted-foreground text-sm">
|
||||
Overdue notifications
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Feature 3 */}
|
||||
<Card className="bg-card border-border hover:border-primary/20 border transition-all">
|
||||
<CardContent className="p-6 sm:p-8">
|
||||
<div className="bg-primary/10 text-primary mb-4 inline-flex p-3">
|
||||
<Shield className="h-6 w-6" />
|
||||
</div>
|
||||
<h3 className="text-foreground mb-3 text-xl font-bold">
|
||||
Professional Features
|
||||
</h3>
|
||||
<p className="text-muted-foreground mb-4">
|
||||
Professional features to help you get paid on time.
|
||||
</p>
|
||||
<ul className="space-y-2">
|
||||
<li className="flex items-center gap-2">
|
||||
<Check className="text-primary h-4 w-4" />
|
||||
<span className="text-muted-foreground text-sm">
|
||||
PDF generation
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Check className="text-primary h-4 w-4" />
|
||||
<span className="text-muted-foreground text-sm">
|
||||
Custom tax rates
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Check className="text-primary h-4 w-4" />
|
||||
<span className="text-muted-foreground text-sm">
|
||||
Professional numbering
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="grid gap-8 md:grid-cols-3">
|
||||
{[
|
||||
{
|
||||
icon: Rocket,
|
||||
title: "Quick Setup",
|
||||
description: "Start creating invoices immediately. No complicated setup required.",
|
||||
items: ["Simple client management", "Professional templates", "Easy invoice sending"]
|
||||
},
|
||||
{
|
||||
icon: BarChart3,
|
||||
title: "Payment Tracking",
|
||||
description: "Keep track of invoice status and monitor your payments effortlessly.",
|
||||
items: ["Invoice status tracking", "Payment history", "Overdue notifications"]
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Professional Features",
|
||||
description: "Tools that make you look professional and get you paid faster.",
|
||||
items: ["PDF generation", "Custom tax rates", "Professional numbering"]
|
||||
}
|
||||
].map((feature, i) => (
|
||||
<Card key={i} className="group hover:-translate-y-2 transition-transform duration-500 border-border/40 bg-background/60 backdrop-blur-xl">
|
||||
<CardContent className="p-8">
|
||||
<div className="bg-primary/10 text-primary mb-6 inline-flex rounded-2xl p-4">
|
||||
<feature.icon className="h-8 w-8" />
|
||||
</div>
|
||||
<h3 className="text-foreground mb-4 text-2xl font-bold font-heading">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="text-muted-foreground mb-6 leading-relaxed">
|
||||
{feature.description}
|
||||
</p>
|
||||
<ul className="space-y-3">
|
||||
{feature.items.map((item, j) => (
|
||||
<li key={j} className="flex items-center gap-3 text-sm text-foreground/80">
|
||||
<div className="h-1.5 w-1.5 rounded-full bg-primary" />
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Pricing Section */}
|
||||
<section
|
||||
id="pricing"
|
||||
className="bg-background relative overflow-hidden py-16 sm:py-24"
|
||||
>
|
||||
<div className="relative container mx-auto px-4">
|
||||
<div className="mb-12 text-center sm:mb-16">
|
||||
<h2 className="text-foreground mb-4 text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl">
|
||||
Simple pricing
|
||||
</h2>
|
||||
<p className="text-muted-foreground mx-auto max-w-2xl text-lg sm:text-xl">
|
||||
Start free, stay free. No hidden fees or limits.
|
||||
</p>
|
||||
<section id="pricing" className="py-24 relative overflow-hidden">
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
<div className="max-w-4xl mx-auto text-center mb-16">
|
||||
<h2 className="text-5xl font-heading font-bold mb-6">Simple Pricing</h2>
|
||||
<p className="text-xl text-muted-foreground">Focus on your work, not on fees.</p>
|
||||
</div>
|
||||
|
||||
<div className="mx-auto max-w-md">
|
||||
<Card className="bg-card border-primary border-2">
|
||||
<div className="bg-primary/10 text-primary border-primary/20 mx-auto -mt-3 w-fit border px-6 py-1 text-sm font-medium">
|
||||
<div className="max-w-md mx-auto">
|
||||
<Card className="relative overflow-visible border-primary/50 shadow-2xl shadow-primary/5 bg-background/80 backdrop-blur-xl">
|
||||
<div className="absolute -top-4 left-1/2 -translate-x-1/2 bg-primary text-primary-foreground px-6 py-1.5 rounded-full text-sm font-medium shadow-lg">
|
||||
Forever Free
|
||||
</div>
|
||||
<CardContent className="p-6 sm:p-8">
|
||||
<div className="mb-6 text-center">
|
||||
<div className="text-foreground mb-2 text-4xl font-bold sm:text-5xl">
|
||||
$0
|
||||
</div>
|
||||
<p className="text-muted-foreground">
|
||||
Forever. No credit card required.
|
||||
</p>
|
||||
<CardContent className="p-10 text-center">
|
||||
<div className="mb-2 text-6xl font-bold font-heading">$0</div>
|
||||
<div className="text-muted-foreground mb-8">No credit card required.</div>
|
||||
|
||||
<div className="space-y-4 mb-10 text-left pl-8">
|
||||
{[
|
||||
"Unlimited Invoices",
|
||||
"Unlimited Clients",
|
||||
"PDF Downloads",
|
||||
"Payment Tracking",
|
||||
"Email Support"
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex items-center gap-3">
|
||||
<Check className="h-5 w-5 text-primary shrink-0" />
|
||||
<span className="text-foreground/90">{item}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<ul className="mb-8 space-y-3">
|
||||
{[
|
||||
"Unlimited invoices",
|
||||
"Client management",
|
||||
"PDF generation",
|
||||
"Payment tracking",
|
||||
"Professional templates",
|
||||
"Custom tax rates",
|
||||
"Email support",
|
||||
].map((feature, i) => (
|
||||
<li key={i} className="flex items-center gap-3">
|
||||
<Check className="text-primary h-5 w-5" />
|
||||
<span className="text-foreground">{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<Link href="/auth/register" className="block">
|
||||
<Button className="w-full" size="lg">
|
||||
Get Started Free
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
<Button size="lg" className="w-full text-lg h-12 rounded-xl">
|
||||
Get Started
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
@@ -311,58 +223,21 @@ export default function HomePage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="bg-primary relative overflow-hidden py-16 sm:py-24">
|
||||
<div className="relative container mx-auto px-4 text-center">
|
||||
<h2 className="text-primary-foreground mb-4 text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl">
|
||||
Ready to get started?
|
||||
</h2>
|
||||
<p className="text-primary-foreground/80 mx-auto mb-8 max-w-2xl text-lg sm:text-xl">
|
||||
Join thousands of freelancers who trust beenvoice for their
|
||||
invoicing needs.
|
||||
</p>
|
||||
<div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
|
||||
<Link href="/auth/register">
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="lg"
|
||||
className="group w-full px-6 py-3 text-base font-semibold sm:w-auto sm:px-8 sm:py-4 sm:text-lg"
|
||||
>
|
||||
Start Free Today
|
||||
<ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1 sm:h-5 sm:w-5" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="bg-muted border-border border-t py-8">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex flex-col items-center justify-between gap-4 sm:flex-row">
|
||||
<div className="flex items-center gap-2">
|
||||
<Logo size="sm" />
|
||||
<span className="text-muted-foreground text-sm">
|
||||
© 2024 beenvoice. Built for freelancers.
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-6">
|
||||
<Link
|
||||
href="/auth/signin"
|
||||
className="text-muted-foreground hover:text-foreground text-sm transition-colors"
|
||||
>
|
||||
Sign In
|
||||
</Link>
|
||||
<Link
|
||||
href="/auth/register"
|
||||
className="text-muted-foreground hover:text-foreground text-sm transition-colors"
|
||||
>
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
<footer className="border-t border-border/40 bg-background/50 backdrop-blur-sm py-12 mt-12">
|
||||
<div className="container mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<Logo size="sm" />
|
||||
<span className="text-sm text-muted-foreground">© 2024 beenvoice</span>
|
||||
</div>
|
||||
<div className="flex gap-8 text-sm text-muted-foreground">
|
||||
<a href="#" className="hover:text-foreground transition-colors">Privacy</a>
|
||||
<a href="#" className="hover:text-foreground transition-colors">Terms</a>
|
||||
<a href="#" className="hover:text-foreground transition-colors">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
375
src/components/forms/invoice-calendar-view.tsx
Normal file
375
src/components/forms/invoice-calendar-view.tsx
Normal file
@@ -0,0 +1,375 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import { format, startOfWeek, endOfWeek, eachDayOfInterval, isSameDay, subWeeks, addWeeks, subMonths, addMonths } from "date-fns";
|
||||
import { Calendar } from "~/components/ui/calendar";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from "~/components/ui/dialog";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { Input } from "~/components/ui/input";
|
||||
import { Label } from "~/components/ui/label";
|
||||
import { NumberInput } from "~/components/ui/number-input";
|
||||
import { Plus, Trash2, Clock, DollarSign, Calendar as CalendarIcon, ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { cn } from "~/lib/utils";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
|
||||
import { Tabs, TabsList, TabsTrigger } from "~/components/ui/tabs";
|
||||
|
||||
interface InvoiceItem {
|
||||
id: string;
|
||||
date: Date;
|
||||
description: string;
|
||||
hours: number;
|
||||
rate: number;
|
||||
amount: number;
|
||||
}
|
||||
|
||||
interface InvoiceCalendarViewProps {
|
||||
items: InvoiceItem[];
|
||||
onUpdateItem: (
|
||||
index: number,
|
||||
field: string,
|
||||
value: string | number | Date
|
||||
) => void;
|
||||
onAddItem: (date?: Date) => void;
|
||||
onRemoveItem: (index: number) => void;
|
||||
className?: string;
|
||||
defaultHourlyRate: number | null;
|
||||
}
|
||||
|
||||
export function InvoiceCalendarView({
|
||||
items,
|
||||
onUpdateItem,
|
||||
onAddItem,
|
||||
onRemoveItem,
|
||||
className,
|
||||
defaultHourlyRate,
|
||||
}: InvoiceCalendarViewProps) {
|
||||
const [date, setDate] = React.useState<Date | undefined>(undefined); // Start unselected
|
||||
const [viewDate, setViewDate] = React.useState<Date>(new Date()); // Controls the view (month/week)
|
||||
const [view, setView] = React.useState<"month" | "week">("month");
|
||||
const [dialogOpen, setDialogOpen] = React.useState(false);
|
||||
const [selectedDateItems, setSelectedDateItems] = React.useState<{ item: InvoiceItem; index: number }[]>([]);
|
||||
|
||||
// Function to get items for the selected date
|
||||
const getItemsForDate = React.useCallback((targetDate: Date) => {
|
||||
return items
|
||||
.map((item, index) => ({ item, index }))
|
||||
.filter((wrapper) => {
|
||||
const itemDate = new Date(wrapper.item.date);
|
||||
return isSameDay(itemDate, targetDate);
|
||||
});
|
||||
}, [items]);
|
||||
|
||||
const handleSelectDate = (newDate: Date | undefined) => {
|
||||
if (!newDate) return;
|
||||
setDate(newDate);
|
||||
// Optionally update viewDate to match selection if desired, but user wants them decoupled during nav
|
||||
// setViewDate(newDate);
|
||||
const dateItems = getItemsForDate(newDate);
|
||||
setSelectedDateItems(dateItems);
|
||||
setDialogOpen(true);
|
||||
};
|
||||
|
||||
// refresh selected items when main items change
|
||||
React.useEffect(() => {
|
||||
if (date && dialogOpen) {
|
||||
setSelectedDateItems(getItemsForDate(date));
|
||||
}
|
||||
}, [items, date, dialogOpen, getItemsForDate]);
|
||||
|
||||
const handleAddNewItem = () => {
|
||||
if (date) {
|
||||
onAddItem(date);
|
||||
}
|
||||
};
|
||||
|
||||
// Week View Logic - Uses viewDate
|
||||
const currentWeekStart = startOfWeek(viewDate);
|
||||
const currentWeekEnd = endOfWeek(viewDate);
|
||||
const weekDays = eachDayOfInterval({ start: currentWeekStart, end: currentWeekEnd });
|
||||
|
||||
const handleCloseDialog = (isOpen: boolean) => {
|
||||
setDialogOpen(isOpen);
|
||||
if (!isOpen) {
|
||||
setDate(undefined);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={cn("flex flex-col gap-4 h-full w-full", className)}>
|
||||
<div className="flex items-center justify-between px-4 pt-4 w-full gap-4">
|
||||
{/* Navigation Controls */}
|
||||
<div className="flex items-center gap-2">
|
||||
{view === "week" ? (
|
||||
<>
|
||||
<Button variant="outline" size="icon" onClick={() => setViewDate(d => subWeeks(d, 1))} className="h-8 w-8 rounded-lg">
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<span className="text-sm font-medium w-36 text-center">
|
||||
{`${format(currentWeekStart, "MMM d")} - ${format(currentWeekEnd, "MMM d")}`}
|
||||
</span>
|
||||
<Button variant="outline" size="icon" onClick={() => setViewDate(d => addWeeks(d, 1))} className="h-8 w-8 rounded-lg">
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Button variant="outline" size="icon" onClick={() => setViewDate(d => subMonths(d, 1))} className="h-8 w-8 rounded-lg">
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<span className="text-sm font-medium w-36 text-center">
|
||||
{format(viewDate, "MMMM yyyy")}
|
||||
</span>
|
||||
<Button variant="outline" size="icon" onClick={() => setViewDate(d => addMonths(d, 1))} className="h-8 w-8 rounded-lg">
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2 ml-auto">
|
||||
{/* View Switcher */}
|
||||
<div className="bg-muted p-1 rounded-lg flex text-sm">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setView("month")}
|
||||
className={cn("px-3 py-1.5 rounded-md transition-all text-center font-medium", view === "month" ? "bg-background shadow text-foreground" : "text-muted-foreground hover:text-foreground")}
|
||||
>
|
||||
Month
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setView("week")}
|
||||
className={cn("px-3 py-1.5 rounded-md transition-all text-center font-medium", view === "week" ? "bg-background shadow text-foreground" : "text-muted-foreground hover:text-foreground")}
|
||||
>
|
||||
Week
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 w-full overflow-hidden">
|
||||
{view === "month" ? (
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={date}
|
||||
onSelect={handleSelectDate}
|
||||
month={viewDate}
|
||||
onMonthChange={setViewDate}
|
||||
className="rounded-md border-0 w-full p-0"
|
||||
classNames={{
|
||||
root: "w-full p-0",
|
||||
months: "flex flex-col w-full",
|
||||
month: "flex flex-col w-full space-y-4",
|
||||
|
||||
// Grid - Revert to Flex but Enforce 1/7th Width
|
||||
// table: "w-full border-collapse", // No table-fixed
|
||||
head_row: "flex w-full",
|
||||
row: "flex w-full mt-2",
|
||||
|
||||
// Cells & Headers: Explicit width 14.28%
|
||||
// Use calc(100%/7) via tailwind arbitrary or just flex bases.
|
||||
// Better: w-[14.28%] flex-none (approx 1/7)
|
||||
weekdays: "flex w-full border-b",
|
||||
weekday: "w-[14.285%] flex-none text-muted-foreground font-normal text-[0.8rem] text-center pb-4",
|
||||
|
||||
week: "flex w-full mt-2",
|
||||
cell: "w-[14.285%] flex-none h-32 border-b p-0 relative focus-within:relative focus-within:z-20 text-center text-sm",
|
||||
|
||||
// Hide internal navigation & caption entirely
|
||||
nav: "hidden",
|
||||
caption: "hidden",
|
||||
|
||||
day: cn(
|
||||
"w-full h-full p-2 font-normal aria-selected:opacity-100 flex flex-col items-start justify-start gap-1 hover:bg-accent/50 hover:text-accent-foreground align-top transition-colors rounded-xl"
|
||||
),
|
||||
day_selected: "bg-primary/5 text-primary",
|
||||
day_today: "bg-accent/20",
|
||||
day_outside: "text-muted-foreground opacity-30",
|
||||
}}
|
||||
formatters={{
|
||||
formatMonthCaption: () => "", // Clear default caption text to prevent duplication
|
||||
}}
|
||||
components={{
|
||||
DayButton: (props) => {
|
||||
const { day, modifiers, className, ...buttonProps } = props;
|
||||
const DayDate = day.date;
|
||||
const dayItems = getItemsForDate(DayDate);
|
||||
// const totalHours = dayItems.reduce((acc, curr) => acc + curr.item.hours, 0); // Unused now
|
||||
|
||||
return (
|
||||
<button
|
||||
{...buttonProps}
|
||||
type="button"
|
||||
className={cn(
|
||||
"relative flex h-full w-full flex-col items-start justify-between p-2 transition-all rounded-xl border border-transparent hover:border-border/50 hover:bg-secondary/30 text-left overflow-hidden",
|
||||
// Selected State: Filled Box, No Outline
|
||||
modifiers.selected && "bg-primary text-primary-foreground hover:bg-primary/90 shadow-md transform scale-[0.98]",
|
||||
modifiers.today && !modifiers.selected && "bg-accent/40 rounded-xl",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<span className="text-sm font-medium z-10">{DayDate.getDate()}</span>
|
||||
{dayItems.length > 0 && (
|
||||
<div className="flex flex-col gap-1 w-full mt-1 overflow-hidden h-full justify-end pb-1">
|
||||
<div className="flex flex-col gap-1 w-full mt-1">
|
||||
{dayItems.slice(0, 4).map((item, idx) => (
|
||||
<div key={idx} className={cn("h-1 w-full rounded-full", modifiers.selected ? "bg-primary-foreground/50" : "bg-primary/50")} />
|
||||
))}
|
||||
{dayItems.length > 4 && <div className={cn("h-1 w-1/3 rounded-full", modifiers.selected ? "bg-primary-foreground/30" : "bg-muted-foreground/30")} />}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-4 p-4 h-full w-full">
|
||||
{weekDays.map((day) => {
|
||||
const isSelected = date && isSameDay(day, date);
|
||||
const isToday = isSameDay(day, new Date());
|
||||
const dayItems = getItemsForDate(day);
|
||||
const totalHours = dayItems.reduce((acc, curr) => acc + curr.item.hours, 0);
|
||||
|
||||
return (
|
||||
<button
|
||||
key={day.toString()}
|
||||
type="button"
|
||||
onClick={() => handleSelectDate(day)}
|
||||
className={cn(
|
||||
"flex flex-col h-full min-h-[400px] border rounded-3xl p-4 text-left transition-all hover:bg-accent/30 w-full",
|
||||
isSelected ? "ring-2 ring-primary ring-offset-2 bg-primary/5" : "bg-background/40",
|
||||
isToday && !isSelected ? "bg-accent/40" : ""
|
||||
)}
|
||||
>
|
||||
<div className="flex flex-col items-center mb-4 pb-4 border-b w-full">
|
||||
<span className="text-xs font-bold text-muted-foreground uppercase">{format(day, "EEE")}</span>
|
||||
<span className="text-2xl font-light">{format(day, "d")}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 space-y-2 w-full overflow-hidden">
|
||||
{dayItems.length > 0 ? (
|
||||
dayItems.map(({ item }, i) => (
|
||||
<div key={i} className="bg-background rounded-xl p-2 text-xs shadow-sm border">
|
||||
<div className="font-medium truncate">{item.description || "No description"}</div>
|
||||
<div className="text-muted-foreground">{item.hours}h</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="h-full flex items-center justify-center text-muted-foreground/20">
|
||||
<Plus className="w-8 h-8" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{dayItems.length > 0 && (
|
||||
<div className="pt-2 mt-auto text-center w-full">
|
||||
<span className="text-sm font-semibold">{totalHours}h Total</span>
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Dialog for Day Details - Now consistently used and rounded */}
|
||||
<Dialog
|
||||
open={dialogOpen}
|
||||
onOpenChange={handleCloseDialog}
|
||||
>
|
||||
<DialogContent className="max-h-[85vh] overflow-y-auto sm:max-w-[600px] rounded-3xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2 text-xl">
|
||||
<div className="bg-primary/10 p-2 rounded-full">
|
||||
<CalendarIcon className="w-5 h-5 text-primary" />
|
||||
</div>
|
||||
{date ? format(date, "EEEE, MMMM do") : "Details"}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-6 py-4">
|
||||
{date && selectedDateItems.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-center space-y-3 bg-secondary/20 rounded-3xl border border-dashed border-border">
|
||||
<Clock className="w-12 h-12 text-muted-foreground/30" />
|
||||
<div className="space-y-1">
|
||||
<p className="font-medium text-foreground">No hours logged</p>
|
||||
<p className="text-sm text-muted-foreground">Add time entries for this day.</p>
|
||||
</div>
|
||||
<Button onClick={handleAddNewItem} variant="secondary" className="mt-2 text-primary">
|
||||
Start Logging
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{selectedDateItems.map(({ item, index }) => (
|
||||
<div key={item.id} className="group relative bg-card hover:bg-accent/10 transition-colors p-4 rounded-2xl border shadow-sm space-y-3">
|
||||
<div className="flex gap-4">
|
||||
<div className="flex-1 space-y-1.5">
|
||||
<Label className="text-xs font-semibold text-muted-foreground">Description</Label>
|
||||
<Input
|
||||
value={item.description}
|
||||
onChange={(e) => onUpdateItem(index, "description", e.target.value)}
|
||||
placeholder="What did you work on?"
|
||||
className="bg-background/50 border-transparent focus:border-input focus:bg-background transition-all"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-end gap-3">
|
||||
<div className="w-24 space-y-1.5">
|
||||
<Label className="text-xs font-semibold text-muted-foreground">Hours</Label>
|
||||
<NumberInput
|
||||
value={item.hours}
|
||||
onChange={v => onUpdateItem(index, "hours", v)}
|
||||
step={0.25}
|
||||
min={0}
|
||||
className="bg-background/50"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-28 space-y-1.5">
|
||||
<Label className="text-xs font-semibold text-muted-foreground">Rate ($/hr)</Label>
|
||||
<NumberInput
|
||||
value={item.rate}
|
||||
onChange={v => onUpdateItem(index, "rate", v)}
|
||||
prefix="$"
|
||||
min={0}
|
||||
className="bg-background/50"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 flex justify-end items-center pb-2 text-sm font-medium text-muted-foreground">
|
||||
<span>${(item.hours * item.rate).toFixed(2)}</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-10 w-10 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-xl"
|
||||
onClick={() => onRemoveItem(index)}
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<Button variant="outline" onClick={handleAddNewItem} className="w-full border-dashed py-6 rounded-xl hover:bg-accent/40 hover:border-primary/50 text-muted-foreground hover:text-primary transition-all">
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Add Another Entry
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button className="w-full sm:w-auto rounded-xl" onClick={() => handleCloseDialog(false)}>Done</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -119,12 +119,14 @@ function SortableLineItem({
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
layout
|
||||
// Add ID here for scrolling
|
||||
id={`invoice-item-${index}`}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
transition={{ duration: 0.2, ease: "easeOut" }}
|
||||
className={cn(
|
||||
"bg-secondary hidden rounded-lg p-4 md:block",
|
||||
"bg-secondary hidden rounded-lg p-4 md:block transition-all",
|
||||
isDragging && "opacity-50",
|
||||
)}
|
||||
>
|
||||
@@ -249,6 +251,11 @@ function MobileLineItem({
|
||||
return (
|
||||
<motion.div
|
||||
layout
|
||||
// Add ID here for scrolling (mobile uses same ID since only one is shown usually via CSS)
|
||||
// But safer to differentiate or handle duplicates?
|
||||
// Actually, IDs must be unique. Let's rely on the structure that only one is visible.
|
||||
// Or just duplicate ID knowing it's slightly invalid but functional if one is `display:none`.
|
||||
id={`invoice-item-${index}-mobile`}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
|
||||
202
src/components/forms/invoice/invoice-meta-sidebar.tsx
Normal file
202
src/components/forms/invoice/invoice-meta-sidebar.tsx
Normal file
@@ -0,0 +1,202 @@
|
||||
"use client";
|
||||
|
||||
import { cn } from "~/lib/utils";
|
||||
import { Label } from "~/components/ui/label";
|
||||
import { Input } from "~/components/ui/input";
|
||||
import { Textarea } from "~/components/ui/textarea";
|
||||
import { DatePicker } from "~/components/ui/date-picker";
|
||||
import { NumberInput } from "~/components/ui/number-input";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "~/components/ui/select";
|
||||
import {
|
||||
STATUS_OPTIONS,
|
||||
} from "./types";
|
||||
import type {
|
||||
InvoiceFormData,
|
||||
ClientType,
|
||||
BusinessType,
|
||||
} from "./types";
|
||||
|
||||
interface InvoiceMetaSidebarProps {
|
||||
formData: InvoiceFormData;
|
||||
updateField: <K extends keyof InvoiceFormData>(
|
||||
field: K,
|
||||
value: InvoiceFormData[K]
|
||||
) => void;
|
||||
clients: ClientType[] | undefined;
|
||||
businesses: BusinessType[] | undefined;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function InvoiceMetaSidebar({
|
||||
formData,
|
||||
updateField,
|
||||
clients,
|
||||
businesses,
|
||||
className,
|
||||
}: InvoiceMetaSidebarProps) {
|
||||
return (
|
||||
<div className={cn("flex flex-col gap-6 p-4 h-full", className)}>
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold text-sm text-muted-foreground uppercase tracking-wider">
|
||||
Invoice Details
|
||||
</h3>
|
||||
|
||||
{/* Status */}
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="status" className="text-xs">Status</Label>
|
||||
<Select
|
||||
value={formData.status}
|
||||
onValueChange={(value: "draft" | "sent" | "paid") =>
|
||||
updateField("status", value)
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="bg-background/50">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{STATUS_OPTIONS.map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Invoice Number */}
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="invoiceNumber" className="text-xs">Invoice Number</Label>
|
||||
<Input
|
||||
id="invoiceNumber"
|
||||
value={formData.invoiceNumber}
|
||||
placeholder="INV-..."
|
||||
disabled
|
||||
className="bg-muted/50 font-mono text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold text-sm text-muted-foreground uppercase tracking-wider">
|
||||
Involved Parties
|
||||
</h3>
|
||||
|
||||
{/* From (Business) */}
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="business" className="text-xs">From (Business)</Label>
|
||||
<Select
|
||||
value={formData.businessId}
|
||||
onValueChange={(value) => updateField("businessId", value)}
|
||||
>
|
||||
<SelectTrigger aria-label="From Business" className="bg-background/50 text-sm">
|
||||
<span className="truncate">
|
||||
<SelectValue placeholder="Select business" />
|
||||
</span>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{businesses?.map((business) => (
|
||||
<SelectItem key={business.id} value={business.id}>
|
||||
{business.name}{business.nickname ? ` (${business.nickname})` : ""}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Bill To (Client) */}
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="client" className="text-xs">Bill To (Client)</Label>
|
||||
<Select
|
||||
value={formData.clientId}
|
||||
onValueChange={(value) => updateField("clientId", value)}
|
||||
>
|
||||
<SelectTrigger aria-label="Bill To Client" className="bg-background/50 text-sm">
|
||||
<span className="truncate">
|
||||
<SelectValue placeholder="Select client" />
|
||||
</span>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{clients?.map((client) => (
|
||||
<SelectItem key={client.id} value={client.id}>
|
||||
{client.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold text-sm text-muted-foreground uppercase tracking-wider">
|
||||
Dates
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs">Issued</Label>
|
||||
<DatePicker
|
||||
date={formData.issueDate}
|
||||
onDateChange={(date) => updateField("issueDate", date ?? new Date())}
|
||||
className="w-full bg-background/50"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs">Due</Label>
|
||||
<DatePicker
|
||||
date={formData.dueDate}
|
||||
onDateChange={(date) => updateField("dueDate", date ?? new Date())}
|
||||
className="w-full bg-background/50"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold text-sm text-muted-foreground uppercase tracking-wider">
|
||||
Config
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs">Tax Rate</Label>
|
||||
<NumberInput
|
||||
value={formData.taxRate}
|
||||
onChange={(v) => updateField("taxRate", v)}
|
||||
min={0}
|
||||
max={100}
|
||||
step={1}
|
||||
suffix="%"
|
||||
className="bg-background/50"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs">Hourly Rate</Label>
|
||||
<NumberInput
|
||||
value={formData.defaultHourlyRate ?? 0}
|
||||
onChange={(v) => updateField("defaultHourlyRate", v)}
|
||||
min={0}
|
||||
prefix="$"
|
||||
placeholder={!formData.clientId ? "Select client" : "Rate"}
|
||||
disabled={!formData.clientId}
|
||||
className={cn("bg-background/50", !formData.clientId && "opacity-50")}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5 flex-1">
|
||||
<Label className="text-xs">Notes</Label>
|
||||
<Textarea
|
||||
value={formData.notes}
|
||||
onChange={(e) => updateField("notes", e.target.value)}
|
||||
placeholder="Notes for client..."
|
||||
className="bg-background/50 resize-none h-24"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
108
src/components/forms/invoice/invoice-workspace.tsx
Normal file
108
src/components/forms/invoice/invoice-workspace.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import { cn } from "~/lib/utils";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { Card, CardContent } from "~/components/ui/card";
|
||||
import { ScrollArea } from "~/components/ui/scroll-area";
|
||||
import { List, Calendar as CalendarIcon, Plus } from "lucide-react";
|
||||
import { InvoiceLineItems } from "../invoice-line-items";
|
||||
import { InvoiceCalendarView } from "../invoice-calendar-view";
|
||||
import type { InvoiceFormData } from "./types";
|
||||
|
||||
interface InvoiceWorkspaceProps {
|
||||
formData: InvoiceFormData;
|
||||
viewMode: "list" | "calendar";
|
||||
setViewMode: (mode: "list" | "calendar") => void;
|
||||
addItem: (date?: Date) => void;
|
||||
removeItem: (index: number) => void;
|
||||
updateItem: (index: number, field: string, value: string | number | Date) => void;
|
||||
moveItemUp: (index: number) => void;
|
||||
moveItemDown: (index: number) => void;
|
||||
reorderItems: (items: any[]) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function InvoiceWorkspace({
|
||||
formData,
|
||||
viewMode,
|
||||
setViewMode,
|
||||
addItem,
|
||||
removeItem,
|
||||
updateItem,
|
||||
moveItemUp,
|
||||
moveItemDown,
|
||||
reorderItems,
|
||||
className,
|
||||
}: InvoiceWorkspaceProps) {
|
||||
|
||||
return (
|
||||
<div className={cn("flex flex-col h-full", className)}>
|
||||
{/* Workspace Header / View Toggle */}
|
||||
<div className="flex items-center justify-between p-4 border-b bg-background/50 backdrop-blur-sm sticky top-0 z-10">
|
||||
<div className="flex items-center gap-2">
|
||||
<h2 className="text-lg font-semibold tracking-tight">
|
||||
{viewMode === 'list' ? 'Line Items' : 'Timesheet'}
|
||||
</h2>
|
||||
<div className="text-sm text-muted-foreground ml-2">
|
||||
{formData.items.length} {formData.items.length === 1 ? 'entry' : 'entries'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center bg-secondary/50 p-1 rounded-lg">
|
||||
<Button
|
||||
variant={viewMode === 'list' ? 'secondary' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={() => setViewMode('list')}
|
||||
className="h-8 gap-2 text-xs"
|
||||
>
|
||||
<List className="w-3.5 h-3.5" />
|
||||
List
|
||||
</Button>
|
||||
<Button
|
||||
variant={viewMode === 'calendar' ? 'secondary' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={() => setViewMode('calendar')}
|
||||
className="h-8 gap-2 text-xs"
|
||||
>
|
||||
<CalendarIcon className="w-3.5 h-3.5" />
|
||||
Calendar
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Workspace Content */}
|
||||
<div className="flex-1 overflow-hidden relative">
|
||||
<div className="absolute inset-0 overflow-y-auto p-6 md:p-8">
|
||||
{viewMode === 'list' ? (
|
||||
<div className="max-w-4xl mx-auto space-y-6">
|
||||
<div className="bg-background/40 backdrop-blur-md rounded-xl border border-white/10 p-1">
|
||||
<InvoiceLineItems
|
||||
items={formData.items}
|
||||
onAddItem={() => addItem()}
|
||||
onRemoveItem={removeItem}
|
||||
onUpdateItem={updateItem}
|
||||
onMoveUp={moveItemUp}
|
||||
onMoveDown={moveItemDown}
|
||||
onReorderItems={reorderItems}
|
||||
className="p-4"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-full">
|
||||
<InvoiceCalendarView
|
||||
items={formData.items}
|
||||
onAddItem={addItem}
|
||||
onRemoveItem={removeItem}
|
||||
onUpdateItem={updateItem}
|
||||
defaultHourlyRate={formData.defaultHourlyRate}
|
||||
className="h-full"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
32
src/components/forms/invoice/types.ts
Normal file
32
src/components/forms/invoice/types.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import { type RouterOutputs } from "~/trpc/react";
|
||||
|
||||
export type ClientType = RouterOutputs["clients"]["getAll"][number];
|
||||
export type BusinessType = RouterOutputs["businesses"]["getAll"][number];
|
||||
|
||||
export interface InvoiceItem {
|
||||
id: string;
|
||||
date: Date;
|
||||
description: string;
|
||||
hours: number;
|
||||
rate: number;
|
||||
amount: number;
|
||||
}
|
||||
|
||||
export interface InvoiceFormData {
|
||||
invoiceNumber: string;
|
||||
businessId: string;
|
||||
clientId: string;
|
||||
issueDate: Date;
|
||||
dueDate: Date;
|
||||
status: "draft" | "sent" | "paid";
|
||||
notes: string;
|
||||
taxRate: number;
|
||||
defaultHourlyRate: number | null;
|
||||
items: InvoiceItem[];
|
||||
}
|
||||
|
||||
export const STATUS_OPTIONS = [
|
||||
{ value: "draft", label: "Draft" },
|
||||
{ value: "sent", label: "Sent" },
|
||||
{ value: "paid", label: "Paid" },
|
||||
] as const;
|
||||
@@ -5,6 +5,7 @@ import { Sidebar } from "~/components/layout/sidebar";
|
||||
import { SidebarProvider, useSidebar } from "~/components/layout/sidebar-provider";
|
||||
import { cn } from "~/lib/utils";
|
||||
import { Menu } from "lucide-react";
|
||||
import { Logo } from "~/components/branding/logo";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { Sheet, SheetContent, SheetTrigger } from "~/components/ui/sheet";
|
||||
import { DashboardBreadcrumbs } from "~/components/navigation/dashboard-breadcrumbs";
|
||||
@@ -21,15 +22,22 @@ function DashboardContent({ children }: { children: React.ReactNode }) {
|
||||
</div>
|
||||
|
||||
{/* Mobile Sidebar (Sheet) */}
|
||||
<div className="md:hidden fixed top-4 left-4 z-50">
|
||||
<div className="md:hidden fixed top-0 left-0 right-0 h-16 bg-background/80 backdrop-blur-md border-b z-50 px-4 flex items-center">
|
||||
<Sheet open={isMobileOpen} onOpenChange={setIsMobileOpen}>
|
||||
<SheetTrigger asChild>
|
||||
<Button variant="outline" size="icon" className="h-10 w-10 bg-background shadow-sm">
|
||||
<Button variant="outline" size="icon" className="h-10 w-10 bg-background shadow-sm" suppressHydrationWarning>
|
||||
<Menu className="h-5 w-5" />
|
||||
<span className="sr-only">Toggle menu</span>
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
{/* Mobile Link / Logo */}
|
||||
<div className="ml-4 flex items-center gap-2">
|
||||
<Logo size="sm" />
|
||||
</div>
|
||||
<SheetContent side="left" className="p-0 w-72">
|
||||
<div className="sr-only">
|
||||
<h2 id="mobile-nav-title">Navigation Menu</h2>
|
||||
</div>
|
||||
<Sidebar mobile onClose={() => setIsMobileOpen(false)} />
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
@@ -39,7 +47,7 @@ function DashboardContent({ children }: { children: React.ReactNode }) {
|
||||
<main
|
||||
suppressHydrationWarning
|
||||
className={cn(
|
||||
"flex-1 min-h-screen transition-all duration-300 ease-in-out",
|
||||
"flex-1 min-h-screen min-w-0 transition-all duration-300 ease-in-out",
|
||||
// Desktop margins based on collapsed state
|
||||
"md:ml-0",
|
||||
// Sidebar is fixed at left: 1rem (16px), width: 16rem (256px) or 4rem (64px)
|
||||
|
||||
@@ -13,12 +13,15 @@ interface FloatingActionBarProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
import { useSidebar } from "~/components/layout/sidebar-provider";
|
||||
|
||||
export function FloatingActionBar({
|
||||
leftContent,
|
||||
children,
|
||||
className,
|
||||
}: FloatingActionBarProps) {
|
||||
const [isDocked, setIsDocked] = useState(false);
|
||||
const { isCollapsed } = useSidebar();
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
@@ -48,9 +51,10 @@ export function FloatingActionBar({
|
||||
<div
|
||||
className={cn(
|
||||
// Base positioning - always at bottom
|
||||
"fixed right-0 left-0 z-50",
|
||||
"fixed right-0 z-50 transition-all duration-300 ease-in-out",
|
||||
// Safe area and sidebar adjustments
|
||||
"pb-safe-area-inset-bottom md:left-64",
|
||||
"pb-safe-area-inset-bottom left-0",
|
||||
isCollapsed ? "md:left-24" : "md:left-[18rem]",
|
||||
// Conditional centering based on dock state
|
||||
isDocked ? "flex justify-center" : "",
|
||||
// Dynamic bottom positioning
|
||||
|
||||
@@ -46,7 +46,8 @@ export function PageHeader({
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-transparent pointer-events-none" />
|
||||
<div className="p-6 relative">
|
||||
<DashboardBreadcrumbs className="mb-4" />
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
{/* UPDATED: flex-col on mobile to prevent squishing, row on sm+ */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
|
||||
<div className="space-y-1">
|
||||
<h1 className={titleClassName ?? getTitleClasses()}>{title}</h1>
|
||||
{description && (
|
||||
@@ -56,7 +57,7 @@ export function PageHeader({
|
||||
)}
|
||||
</div>
|
||||
{children && (
|
||||
<div className="flex flex-shrink-0 gap-2 sm:gap-3">
|
||||
<div className="flex flex-shrink-0 gap-2 sm:gap-3 w-full sm:w-auto">
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
@@ -66,7 +67,8 @@ export function PageHeader({
|
||||
) : (
|
||||
<>
|
||||
<DashboardBreadcrumbs className="mb-2 sm:mb-4" />
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
{/* UPDATED: flex-col on mobile to prevent squishing, row on sm+ */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
|
||||
<div className="animate-fade-in-up space-y-1">
|
||||
<h1 className={titleClassName ?? getTitleClasses()}>{title}</h1>
|
||||
{description && (
|
||||
@@ -78,7 +80,7 @@ export function PageHeader({
|
||||
)}
|
||||
</div>
|
||||
{children && (
|
||||
<div className="animate-slide-in-right animate-delay-200 flex flex-shrink-0 gap-2 sm:gap-3">
|
||||
<div className="animate-slide-in-right animate-delay-200 flex flex-shrink-0 gap-2 sm:gap-3 w-full sm:w-auto">
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -160,21 +160,27 @@ export function Sidebar({ mobile, onClose }: SidebarProps) {
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className={cn("w-full justify-start p-0 hover:bg-transparent", collapsed && "justify-center")}>
|
||||
<div className={cn("flex items-center gap-3", collapsed ? "justify-center" : "w-full")}>
|
||||
{/* FIXED: Changed div to span to prevent hydration error */}
|
||||
<span className={cn("flex items-center gap-3", collapsed ? "justify-center" : "w-full")}>
|
||||
<Avatar className="h-9 w-9 border border-border">
|
||||
<AvatarImage src={getGravatarUrl(session.user.email)} alt={session.user.name ?? "User"} />
|
||||
<AvatarFallback>{session.user.name?.[0] ?? "U"}</AvatarFallback>
|
||||
</Avatar>
|
||||
{!collapsed && (
|
||||
<div className="flex-1 min-w-0 text-left">
|
||||
<p className="text-sm font-medium truncate">{session.user.name}</p>
|
||||
<p className="text-xs text-muted-foreground truncate">{session.user.email}</p>
|
||||
</div>
|
||||
<span className="flex-1 min-w-0 text-left">
|
||||
<span className="block text-sm font-medium truncate">{session.user.name}</span>
|
||||
<span className="block text-xs text-muted-foreground truncate">{session.user.email}</span>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent side="right" align="end" className="w-56" sideOffset={10}>
|
||||
<DropdownMenuContent
|
||||
side="right"
|
||||
align="end"
|
||||
className="w-56 bg-background/80 backdrop-blur-xl border-border/50"
|
||||
sideOffset={10}
|
||||
>
|
||||
<DropdownMenuLabel>
|
||||
<div className="flex flex-col space-y-1">
|
||||
<p className="text-sm font-medium leading-none">{session.user.name}</p>
|
||||
@@ -212,7 +218,7 @@ export function Sidebar({ mobile, onClose }: SidebarProps) {
|
||||
<aside
|
||||
className={cn(
|
||||
"fixed top-4 bottom-4 left-4 z-30 hidden md:flex flex-col",
|
||||
"bg-card border border-border shadow-xl rounded-xl transition-all duration-300 ease-in-out",
|
||||
"bg-background/80 backdrop-blur-xl border-border/50 border shadow-xl rounded-3xl transition-all duration-300 ease-in-out",
|
||||
isCollapsed ? "w-16" : "w-64"
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -4,17 +4,17 @@ import { cva, type VariantProps } from "class-variance-authority";
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
const badgeVariants = cva(
|
||||
"inline-flex items-center rounded-md 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",
|
||||
"inline-flex w-fit items-center rounded-md 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 shadow hover:bg-primary/80",
|
||||
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
|
||||
secondary:
|
||||
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
"bg-secondary text-secondary-foreground shadow-sm border border-secondary/50 hover:bg-secondary/80",
|
||||
destructive:
|
||||
"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
|
||||
outline: "text-foreground",
|
||||
"bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
|
||||
outline: "text-foreground border border-border", // Outline needs border
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
|
||||
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
|
||||
"inline-flex items-center justify-center rounded-xl text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 button-hover",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
@@ -22,9 +22,9 @@ const buttonVariants = cva(
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-4 py-2",
|
||||
sm: "h-8 rounded-md px-3 text-xs",
|
||||
lg: "h-10 rounded-md px-8",
|
||||
icon: "h-9 w-9",
|
||||
sm: "h-8 rounded-lg px-3 text-xs",
|
||||
lg: "h-10 rounded-xl px-8",
|
||||
icon: "h-9 w-9 rounded-full",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
@@ -36,7 +36,7 @@ const buttonVariants = cva(
|
||||
|
||||
export interface ButtonProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||
VariantProps<typeof buttonVariants> {
|
||||
VariantProps<typeof buttonVariants> {
|
||||
asChild?: boolean;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,26 +1,15 @@
|
||||
"use client";
|
||||
"use client"
|
||||
|
||||
import * as React from "react";
|
||||
import * as React from "react"
|
||||
import {
|
||||
ChevronDownIcon,
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
type DayButton,
|
||||
DayPicker,
|
||||
getDefaultClassNames,
|
||||
} from "react-day-picker";
|
||||
} from "lucide-react"
|
||||
import { type DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
|
||||
|
||||
import { cn } from "~/lib/utils";
|
||||
import { Button, buttonVariants } from "~/components/ui/button";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "~/components/ui/select";
|
||||
import { cn } from "~/lib/utils"
|
||||
import { Button, buttonVariants } from "~/components/ui/button"
|
||||
|
||||
function Calendar({
|
||||
className,
|
||||
@@ -28,35 +17,13 @@ function Calendar({
|
||||
showOutsideDays = true,
|
||||
captionLayout = "label",
|
||||
buttonVariant = "ghost",
|
||||
formatters: _formatters,
|
||||
formatters,
|
||||
components,
|
||||
month,
|
||||
onMonthChange,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DayPicker> & {
|
||||
buttonVariant?: React.ComponentProps<typeof Button>["variant"];
|
||||
buttonVariant?: React.ComponentProps<typeof Button>["variant"]
|
||||
}) {
|
||||
const defaultClassNames = getDefaultClassNames();
|
||||
|
||||
const months = [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar",
|
||||
"Apr",
|
||||
"May",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Aug",
|
||||
"Sep",
|
||||
"Oct",
|
||||
"Nov",
|
||||
"Dec",
|
||||
];
|
||||
|
||||
const currentYear = month?.getFullYear() ?? new Date().getFullYear();
|
||||
const currentMonth = month?.getMonth() ?? new Date().getMonth();
|
||||
|
||||
const years = Array.from({ length: 11 }, (_, i) => currentYear - 5 + i);
|
||||
const defaultClassNames = getDefaultClassNames()
|
||||
|
||||
return (
|
||||
<DayPicker
|
||||
@@ -65,82 +32,97 @@ function Calendar({
|
||||
"bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
|
||||
String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
|
||||
String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
|
||||
className,
|
||||
className
|
||||
)}
|
||||
captionLayout={captionLayout}
|
||||
month={month}
|
||||
onMonthChange={onMonthChange}
|
||||
formatters={{
|
||||
formatMonthDropdown: (date) =>
|
||||
date.toLocaleString("default", { month: "short" }),
|
||||
...formatters,
|
||||
}}
|
||||
classNames={{
|
||||
root: cn("w-fit", defaultClassNames.root),
|
||||
months: cn(
|
||||
"flex gap-4 flex-col md:flex-row relative",
|
||||
defaultClassNames.months,
|
||||
defaultClassNames.months
|
||||
),
|
||||
month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
|
||||
nav: cn(
|
||||
"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
|
||||
defaultClassNames.nav,
|
||||
defaultClassNames.nav
|
||||
),
|
||||
button_previous: cn(
|
||||
buttonVariants({ variant: buttonVariant }),
|
||||
"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
|
||||
defaultClassNames.button_previous,
|
||||
defaultClassNames.button_previous
|
||||
),
|
||||
button_next: cn(
|
||||
buttonVariants({ variant: buttonVariant }),
|
||||
"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
|
||||
defaultClassNames.button_next,
|
||||
defaultClassNames.button_next
|
||||
),
|
||||
month_caption: cn(
|
||||
"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
|
||||
defaultClassNames.month_caption,
|
||||
defaultClassNames.month_caption
|
||||
),
|
||||
dropdowns: cn(
|
||||
"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
|
||||
defaultClassNames.dropdowns,
|
||||
defaultClassNames.dropdowns
|
||||
),
|
||||
dropdown_root: cn(
|
||||
"relative has-focus:border-ring border border-input shadow-sm has-focus:ring-ring/50 has-focus:ring-2 h-8",
|
||||
defaultClassNames.dropdown_root,
|
||||
"relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
|
||||
defaultClassNames.dropdown_root
|
||||
),
|
||||
dropdown: cn(
|
||||
"absolute bg-transparent inset-0 w-full h-full opacity-0 cursor-pointer",
|
||||
defaultClassNames.dropdown,
|
||||
"absolute bg-popover inset-0 opacity-0",
|
||||
defaultClassNames.dropdown
|
||||
),
|
||||
caption_label: cn(
|
||||
"select-none font-medium text-sm hidden",
|
||||
defaultClassNames.caption_label,
|
||||
"select-none font-medium",
|
||||
captionLayout === "label"
|
||||
? "text-sm"
|
||||
: "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
|
||||
defaultClassNames.caption_label
|
||||
),
|
||||
table: "w-full border-collapse",
|
||||
weekdays: cn("flex", defaultClassNames.weekdays),
|
||||
weekday: cn(
|
||||
"text-muted-foreground flex-1 font-normal text-[0.8rem] select-none",
|
||||
defaultClassNames.weekday,
|
||||
"text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
|
||||
defaultClassNames.weekday
|
||||
),
|
||||
week: cn("flex w-full mt-2", defaultClassNames.week),
|
||||
week_number_header: cn(
|
||||
"select-none w-(--cell-size)",
|
||||
defaultClassNames.week_number_header,
|
||||
defaultClassNames.week_number_header
|
||||
),
|
||||
week_number: cn(
|
||||
"text-[0.8rem] select-none text-muted-foreground",
|
||||
defaultClassNames.week_number,
|
||||
defaultClassNames.week_number
|
||||
),
|
||||
day: cn(
|
||||
"relative w-full h-full p-0 text-center group/day aspect-square select-none",
|
||||
defaultClassNames.day,
|
||||
"relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
|
||||
props.showWeekNumber
|
||||
? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
|
||||
: "[&:first-child[data-selected=true]_button]:rounded-l-md",
|
||||
defaultClassNames.day
|
||||
),
|
||||
range_start: cn(
|
||||
"rounded-l-md bg-accent",
|
||||
defaultClassNames.range_start
|
||||
),
|
||||
range_middle: cn("rounded-none", defaultClassNames.range_middle),
|
||||
range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
|
||||
today: cn(
|
||||
"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
|
||||
defaultClassNames.today
|
||||
),
|
||||
range_start: cn("", defaultClassNames.range_start),
|
||||
range_middle: cn("", defaultClassNames.range_middle),
|
||||
range_end: cn("", defaultClassNames.range_end),
|
||||
today: cn("font-semibold", defaultClassNames.today),
|
||||
outside: cn(
|
||||
"text-muted-foreground aria-selected:text-muted-foreground",
|
||||
defaultClassNames.outside,
|
||||
defaultClassNames.outside
|
||||
),
|
||||
disabled: cn(
|
||||
"text-muted-foreground opacity-50",
|
||||
defaultClassNames.disabled,
|
||||
defaultClassNames.disabled
|
||||
),
|
||||
hidden: cn("invisible", defaultClassNames.hidden),
|
||||
...classNames,
|
||||
@@ -154,13 +136,13 @@ function Calendar({
|
||||
className={cn(className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
)
|
||||
},
|
||||
Chevron: ({ className, orientation, ...props }) => {
|
||||
if (orientation === "left") {
|
||||
return (
|
||||
<ChevronLeftIcon className={cn("size-4", className)} {...props} />
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
if (orientation === "right") {
|
||||
@@ -169,67 +151,14 @@ function Calendar({
|
||||
className={cn("size-4", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<ChevronDownIcon className={cn("size-4", className)} {...props} />
|
||||
);
|
||||
)
|
||||
},
|
||||
DayButton: CalendarDayButton,
|
||||
MonthCaption: ({ calendarMonth: _calendarMonth }) => {
|
||||
if (captionLayout !== "dropdown") {
|
||||
return <></>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="calendar-custom-header flex items-center justify-center gap-2 py-2">
|
||||
<Select
|
||||
value={currentMonth.toString()}
|
||||
onValueChange={(value) => {
|
||||
const newDate = new Date(currentYear, parseInt(value), 1);
|
||||
onMonthChange?.(newDate);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger
|
||||
size="sm"
|
||||
className="w-auto px-2 text-sm font-semibold"
|
||||
>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{months.map((monthName, index) => (
|
||||
<SelectItem key={index} value={index.toString()}>
|
||||
{monthName}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select
|
||||
value={currentYear.toString()}
|
||||
onValueChange={(value) => {
|
||||
const newDate = new Date(parseInt(value), currentMonth, 1);
|
||||
onMonthChange?.(newDate);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger
|
||||
size="sm"
|
||||
className="w-auto px-2 text-sm font-semibold"
|
||||
>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{years.map((year) => (
|
||||
<SelectItem key={year} value={year.toString()}>
|
||||
{year}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
WeekNumber: ({ children, ...props }) => {
|
||||
return (
|
||||
<td {...props}>
|
||||
@@ -237,13 +166,13 @@ function Calendar({
|
||||
{children}
|
||||
</div>
|
||||
</td>
|
||||
);
|
||||
)
|
||||
},
|
||||
...components,
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
function CalendarDayButton({
|
||||
@@ -252,12 +181,12 @@ function CalendarDayButton({
|
||||
modifiers,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DayButton>) {
|
||||
// const _defaultClassNames = getDefaultClassNames();
|
||||
const defaultClassNames = getDefaultClassNames()
|
||||
|
||||
const ref = React.useRef<HTMLButtonElement>(null);
|
||||
const ref = React.useRef<HTMLButtonElement>(null)
|
||||
React.useEffect(() => {
|
||||
if (modifiers.focused) ref.current?.focus();
|
||||
}, [modifiers.focused]);
|
||||
if (modifiers.focused) ref.current?.focus()
|
||||
}, [modifiers.focused])
|
||||
|
||||
return (
|
||||
<Button
|
||||
@@ -275,14 +204,13 @@ function CalendarDayButton({
|
||||
data-range-end={modifiers.range_end}
|
||||
data-range-middle={modifiers.range_middle}
|
||||
className={cn(
|
||||
"hover:bg-accent hover:text-foreground-foreground flex aspect-square size-auto h-8 w-full min-w-8 items-center justify-center border-0 text-sm leading-none font-normal shadow-none",
|
||||
modifiers.selected && "bg-primary text-primary-foreground",
|
||||
modifiers.today && !modifiers.selected && "bg-accent font-semibold",
|
||||
className,
|
||||
"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
|
||||
defaultClassNames.day,
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
export { Calendar, CalendarDayButton };
|
||||
export { Calendar, CalendarDayButton }
|
||||
|
||||
@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||
<div
|
||||
data-slot="card"
|
||||
className={cn(
|
||||
"bg-card text-card-foreground border-border/40 flex flex-col rounded-lg border shadow-lg",
|
||||
"bg-background/80 backdrop-blur-xl border-border/50 text-card-foreground flex flex-col rounded-3xl border shadow-sm overflow-hidden",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
37
src/components/ui/image-with-skeleton.tsx
Normal file
37
src/components/ui/image-with-skeleton.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
import { useState } from "react";
|
||||
import Image, { type ImageProps } from "next/image";
|
||||
import { cn } from "~/lib/utils";
|
||||
import { Skeleton } from "~/components/ui/skeleton";
|
||||
|
||||
interface ImageWithSkeletonProps extends ImageProps {
|
||||
containerClassName?: string;
|
||||
}
|
||||
|
||||
export function ImageWithSkeleton({
|
||||
className,
|
||||
containerClassName,
|
||||
alt,
|
||||
...props
|
||||
}: ImageWithSkeletonProps) {
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
return (
|
||||
<div className={cn("relative overflow-hidden", containerClassName)}>
|
||||
{isLoading && (
|
||||
<Skeleton className="absolute inset-0 h-full w-full animate-pulse" />
|
||||
)}
|
||||
<Image
|
||||
className={cn(
|
||||
"duration-700 ease-in-out",
|
||||
isLoading
|
||||
? "scale-110 blur-2xl grayscale"
|
||||
: "scale-100 blur-0 grayscale-0",
|
||||
className
|
||||
)}
|
||||
onLoad={() => setIsLoading(false)}
|
||||
alt={alt}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,10 +1,14 @@
|
||||
"use client";
|
||||
|
||||
import { Toaster as Sonner, type ToasterProps } from "sonner";
|
||||
import { useTheme } from "~/components/providers/theme-provider";
|
||||
|
||||
const Toaster = ({ ...props }: ToasterProps) => {
|
||||
const { theme = "system" } = useTheme();
|
||||
|
||||
return (
|
||||
<Sonner
|
||||
theme={theme as ToasterProps["theme"]}
|
||||
className="toaster group"
|
||||
position="bottom-right"
|
||||
closeButton
|
||||
|
||||
@@ -1,462 +1,154 @@
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
|
||||
@font-face {
|
||||
font-family: "Frutiger";
|
||||
src: url("/fonts/frutiger/Frutiger.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
/* #FFFFFF */
|
||||
--foreground: 240 10% 3.9%;
|
||||
/* #09090B */
|
||||
--card: 0 0% 100%;
|
||||
/* #FFFFFF */
|
||||
--card-foreground: 240 10% 3.9%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 240 10% 3.9%;
|
||||
--primary: 240 5.9% 10%;
|
||||
/* #18181B */
|
||||
--primary-foreground: 0 0% 98%;
|
||||
/* #FAFAFA */
|
||||
--secondary: 240 4.8% 90%;
|
||||
/* #E4E4E7 (Darkened for contrast) */
|
||||
--secondary-foreground: 240 5.9% 10%;
|
||||
--muted: 240 4.8% 95.9%;
|
||||
/* #F4F4F5 */
|
||||
--muted-foreground: 240 3.8% 46.1%;
|
||||
--accent: 240 4.8% 95.9%;
|
||||
--accent-foreground: 240 5.9% 10%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 240 5.9% 90%;
|
||||
/* #E4E4E7 */
|
||||
--input: 240 5.9% 90%;
|
||||
--ring: 240 10% 3.9%;
|
||||
--radius: 1rem;
|
||||
/* 16px Global Radius */
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Frutiger";
|
||||
src: url("/fonts/frutiger/Frutiger_bold.ttf") format("truetype");
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
:root {
|
||||
--radius: 0.8rem;
|
||||
}
|
||||
|
||||
.slate {
|
||||
--background: oklch(0.98 0.01 230);
|
||||
--foreground: oklch(0.2 0.03 230);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.2 0.03 230);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.2 0.03 230);
|
||||
--primary: oklch(0.6 0.01 240);
|
||||
--primary-foreground: oklch(0.98 0.01 240);
|
||||
--secondary: oklch(0.92 0.01 240);
|
||||
--secondary-foreground: oklch(0.2 0.02 240);
|
||||
--muted: oklch(0.92 0.01 240);
|
||||
--muted-foreground: oklch(0.5 0.02 240);
|
||||
--accent: oklch(0.94 0.01 240);
|
||||
--accent-foreground: oklch(0.2 0.02 240);
|
||||
--destructive: oklch(0.58 0.24 28);
|
||||
--destructive-foreground: oklch(0.98 0.01 230);
|
||||
--success: oklch(0.55 0.15 142);
|
||||
--success-foreground: oklch(0.98 0.01 230);
|
||||
--warning: oklch(0.65 0.15 38);
|
||||
--warning-foreground: oklch(0.2 0.03 230);
|
||||
--border: oklch(0.9 0.01 240);
|
||||
--input: oklch(0.9 0.01 240);
|
||||
--ring: oklch(0.6 0.01 240);
|
||||
--sidebar: oklch(0.96 0.01 240);
|
||||
--sidebar-foreground: oklch(0.2 0.02 240);
|
||||
--sidebar-primary: oklch(0.2 0.02 240);
|
||||
--sidebar-primary-foreground: oklch(0.98 0.01 240);
|
||||
--sidebar-accent: oklch(0.92 0.01 240);
|
||||
--sidebar-accent-foreground: oklch(0.2 0.02 240);
|
||||
--sidebar-border: oklch(0.88 0.01 240);
|
||||
--sidebar-ring: oklch(0.6 0.01 240);
|
||||
--navbar: oklch(0.96 0.01 240);
|
||||
--navbar-foreground: oklch(0.2 0.02 240);
|
||||
--navbar-border: oklch(0.88 0.01 240);
|
||||
}
|
||||
|
||||
.dark.slate {
|
||||
--background: oklch(0.15 0.02 240);
|
||||
--foreground: oklch(0.9 0.02 240);
|
||||
--card: oklch(0.2 0.02 240);
|
||||
--card-foreground: oklch(0.9 0.02 240);
|
||||
--popover: oklch(0.22 0.02 240);
|
||||
--popover-foreground: oklch(0.9 0.02 240);
|
||||
--primary: oklch(0.6 0.01 240);
|
||||
--primary-foreground: oklch(0.1 0.02 240);
|
||||
--secondary: oklch(0.25 0.02 240);
|
||||
--secondary-foreground: oklch(0.9 0.02 240);
|
||||
--muted: oklch(0.25 0.02 240);
|
||||
--muted-foreground: oklch(0.7 0.02 240);
|
||||
--accent: oklch(0.3 0.02 240);
|
||||
--accent-foreground: oklch(0.9 0.02 240);
|
||||
--destructive: oklch(0.7 0.19 22);
|
||||
--destructive-foreground: oklch(0.2 0.02 240);
|
||||
--success: oklch(0.6 0.15 142);
|
||||
--success-foreground: oklch(0.98 0.01 240);
|
||||
--warning: oklch(0.7 0.15 38);
|
||||
--warning-foreground: oklch(0.2 0.02 240);
|
||||
--border: oklch(0.28 0.02 240);
|
||||
--input: oklch(0.35 0.02 240);
|
||||
--ring: oklch(0.6 0.01 240);
|
||||
--sidebar: oklch(0.1 0.02 240);
|
||||
--sidebar-foreground: oklch(0.9 0.02 240);
|
||||
--sidebar-primary: oklch(0.9 0.02 240);
|
||||
--sidebar-primary-foreground: oklch(0.1 0.02 240);
|
||||
--sidebar-accent: oklch(0.2 0.02 240);
|
||||
--sidebar-accent-foreground: oklch(0.9 0.02 240);
|
||||
--sidebar-border: oklch(0.25 0.02 240);
|
||||
--sidebar-ring: oklch(0.35 0.02 240);
|
||||
--navbar: oklch(0.1 0.02 240);
|
||||
--navbar-foreground: oklch(0.9 0.02 240);
|
||||
--navbar-border: oklch(0.25 0.02 240);
|
||||
}
|
||||
|
||||
.blue {
|
||||
--background: oklch(0.98 0.01 230);
|
||||
--foreground: oklch(0.2 0.03 230);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.2 0.03 230);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.2 0.03 230);
|
||||
--primary: oklch(0.6 0.15 220);
|
||||
--primary-foreground: oklch(0.98 0.01 230);
|
||||
--secondary: oklch(0.92 0.02 230);
|
||||
--secondary-foreground: oklch(0.2 0.03 230);
|
||||
--muted: oklch(0.92 0.02 230);
|
||||
--muted-foreground: oklch(0.5 0.03 230);
|
||||
--accent: oklch(0.94 0.02 230);
|
||||
--accent-foreground: oklch(0.2 0.03 230);
|
||||
--destructive: oklch(0.58 0.24 28);
|
||||
--destructive-foreground: oklch(0.98 0.01 230);
|
||||
--success: oklch(0.55 0.15 142);
|
||||
--success-foreground: oklch(0.98 0.01 230);
|
||||
--warning: oklch(0.65 0.15 38);
|
||||
--warning-foreground: oklch(0.2 0.03 230);
|
||||
--border: oklch(0.9 0.02 230);
|
||||
--input: oklch(0.9 0.02 230);
|
||||
--ring: oklch(0.6 0.15 220);
|
||||
--sidebar: oklch(0.96 0.01 230);
|
||||
--sidebar-foreground: oklch(0.2 0.03 230);
|
||||
--sidebar-primary: oklch(0.2 0.03 230);
|
||||
--sidebar-primary-foreground: oklch(0.98 0.01 230);
|
||||
--sidebar-accent: oklch(0.92 0.02 230);
|
||||
--sidebar-accent-foreground: oklch(0.2 0.03 230);
|
||||
--sidebar-border: oklch(0.88 0.02 230);
|
||||
--sidebar-ring: oklch(0.6 0.15 220);
|
||||
--navbar: oklch(0.96 0.01 230);
|
||||
--navbar-foreground: oklch(0.2 0.03 230);
|
||||
--navbar-border: oklch(0.88 0.02 230);
|
||||
}
|
||||
|
||||
.dark.blue {
|
||||
--background: oklch(0.15 0.03 230);
|
||||
--foreground: oklch(0.9 0.01 230);
|
||||
--card: oklch(0.2 0.03 230);
|
||||
--card-foreground: oklch(0.9 0.01 230);
|
||||
--popover: oklch(0.22 0.03 230);
|
||||
--popover-foreground: oklch(0.9 0.01 230);
|
||||
--primary: oklch(0.6 0.15 220);
|
||||
--primary-foreground: oklch(0.98 0.01 230);
|
||||
--secondary: oklch(0.25 0.03 230);
|
||||
--secondary-foreground: oklch(0.9 0.01 230);
|
||||
--muted: oklch(0.25 0.03 230);
|
||||
--muted-foreground: oklch(0.7 0.01 230);
|
||||
--accent: oklch(0.3 0.03 230);
|
||||
--accent-foreground: oklch(0.9 0.01 230);
|
||||
--destructive: oklch(0.7 0.19 22);
|
||||
--destructive-foreground: oklch(0.2 0.03 230);
|
||||
--success: oklch(0.6 0.15 142);
|
||||
--success-foreground: oklch(0.98 0.01 230);
|
||||
--warning: oklch(0.7 0.15 38);
|
||||
--warning-foreground: oklch(0.2 0.03 230);
|
||||
--border: oklch(0.28 0.03 230);
|
||||
--input: oklch(0.35 0.03 230);
|
||||
--ring: oklch(0.6 0.15 220);
|
||||
--sidebar: oklch(0.1 0.03 230);
|
||||
--sidebar-foreground: oklch(0.9 0.01 230);
|
||||
--sidebar-primary: oklch(0.9 0.01 230);
|
||||
--sidebar-primary-foreground: oklch(0.1 0.03 230);
|
||||
--sidebar-accent: oklch(0.2 0.03 230);
|
||||
--sidebar-accent-foreground: oklch(0.9 0.01 230);
|
||||
--sidebar-border: oklch(0.25 0.03 230);
|
||||
--sidebar-ring: oklch(0.35 0.03 230);
|
||||
--navbar: oklch(0.1 0.03 230);
|
||||
--navbar-foreground: oklch(0.9 0.01 230);
|
||||
--navbar-border: oklch(0.25 0.03 230);
|
||||
}
|
||||
|
||||
.green {
|
||||
--background: oklch(0.98 0.01 140);
|
||||
--foreground: oklch(0.2 0.05 140);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.2 0.05 140);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.2 0.05 140);
|
||||
--primary: oklch(0.5 0.1 150);
|
||||
--primary-foreground: oklch(0.98 0.01 140);
|
||||
--secondary: oklch(0.94 0.02 140);
|
||||
--secondary-foreground: oklch(0.2 0.05 140);
|
||||
--muted: oklch(0.94 0.02 140);
|
||||
--muted-foreground: oklch(0.5 0.05 140);
|
||||
--accent: oklch(0.94 0.02 140);
|
||||
--accent-foreground: oklch(0.2 0.05 140);
|
||||
--destructive: oklch(0.58 0.24 28);
|
||||
--destructive-foreground: oklch(0.98 0.01 140);
|
||||
--success: oklch(0.55 0.15 142);
|
||||
--success-foreground: oklch(0.98 0.01 140);
|
||||
--warning: oklch(0.65 0.15 38);
|
||||
--warning-foreground: oklch(0.2 0.05 140);
|
||||
--border: oklch(0.9 0.02 140);
|
||||
--input: oklch(0.9 0.02 140);
|
||||
--ring: oklch(0.5 0.1 150);
|
||||
--sidebar: oklch(0.96 0.01 140);
|
||||
--sidebar-foreground: oklch(0.2 0.05 140);
|
||||
--sidebar-primary: oklch(0.2 0.05 140);
|
||||
--sidebar-primary-foreground: oklch(0.98 0.01 140);
|
||||
--sidebar-accent: oklch(0.92 0.02 140);
|
||||
--sidebar-accent-foreground: oklch(0.2 0.05 140);
|
||||
--sidebar-border: oklch(0.88 0.02 140);
|
||||
--sidebar-ring: oklch(0.5 0.1 150);
|
||||
--navbar: oklch(0.96 0.01 140);
|
||||
--navbar-foreground: oklch(0.2 0.05 140);
|
||||
--navbar-border: oklch(0.88 0.02 140);
|
||||
}
|
||||
|
||||
.dark.green {
|
||||
--background: oklch(0.15 0.05 140);
|
||||
--foreground: oklch(0.9 0.05 140);
|
||||
--card: oklch(0.2 0.05 140);
|
||||
--card-foreground: oklch(0.9 0.05 140);
|
||||
--popover: oklch(0.22 0.05 140);
|
||||
--popover-foreground: oklch(0.9 0.05 140);
|
||||
--primary: oklch(0.5 0.1 150);
|
||||
--primary-foreground: oklch(0.1 0.05 140);
|
||||
--secondary: oklch(0.25 0.05 140);
|
||||
--secondary-foreground: oklch(0.9 0.05 140);
|
||||
--muted: oklch(0.25 0.05 140);
|
||||
--muted-foreground: oklch(0.7 0.05 140);
|
||||
--accent: oklch(0.3 0.05 140);
|
||||
--accent-foreground: oklch(0.9 0.05 140);
|
||||
--destructive: oklch(0.7 0.19 22);
|
||||
--destructive-foreground: oklch(0.2 0.05 140);
|
||||
--success: oklch(0.6 0.15 142);
|
||||
--success-foreground: oklch(0.98 0.01 140);
|
||||
--warning: oklch(0.7 0.15 38);
|
||||
--warning-foreground: oklch(0.2 0.05 140);
|
||||
--border: oklch(0.28 0.05 140);
|
||||
--input: oklch(0.35 0.05 140);
|
||||
--ring: oklch(0.5 0.1 150);
|
||||
--sidebar: oklch(0.1 0.05 140);
|
||||
--sidebar-foreground: oklch(0.9 0.05 140);
|
||||
--sidebar-primary: oklch(0.9 0.05 140);
|
||||
--sidebar-primary-foreground: oklch(0.1 0.05 140);
|
||||
--sidebar-accent: oklch(0.2 0.05 140);
|
||||
--sidebar-accent-foreground: oklch(0.9 0.05 140);
|
||||
--sidebar-border: oklch(0.25 0.05 140);
|
||||
--sidebar-ring: oklch(0.35 0.05 140);
|
||||
--navbar: oklch(0.1 0.05 140);
|
||||
--navbar-foreground: oklch(0.9 0.05 140);
|
||||
--navbar-border: oklch(0.25 0.05 140);
|
||||
}
|
||||
|
||||
.rose {
|
||||
--background: oklch(0.98 0.01 20);
|
||||
--foreground: oklch(0.2 0.05 20);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.2 0.05 20);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.2 0.05 20);
|
||||
--primary: oklch(0.7 0.2 10);
|
||||
--primary-foreground: oklch(0.98 0.01 20);
|
||||
--secondary: oklch(0.94 0.02 20);
|
||||
--secondary-foreground: oklch(0.2 0.05 20);
|
||||
--muted: oklch(0.94 0.02 20);
|
||||
--muted-foreground: oklch(0.5 0.05 20);
|
||||
--accent: oklch(0.94 0.02 20);
|
||||
--accent-foreground: oklch(0.2 0.05 20);
|
||||
--destructive: oklch(0.58 0.24 28);
|
||||
--destructive-foreground: oklch(0.98 0.01 20);
|
||||
--success: oklch(0.55 0.15 142);
|
||||
--success-foreground: oklch(0.98 0.01 20);
|
||||
--warning: oklch(0.65 0.15 38);
|
||||
--warning-foreground: oklch(0.2 0.05 20);
|
||||
--border: oklch(0.9 0.02 20);
|
||||
--input: oklch(0.9 0.02 20);
|
||||
--ring: oklch(0.7 0.2 10);
|
||||
--sidebar: oklch(0.96 0.01 20);
|
||||
--sidebar-foreground: oklch(0.2 0.05 20);
|
||||
--sidebar-primary: oklch(0.2 0.05 20);
|
||||
--sidebar-primary-foreground: oklch(0.98 0.01 20);
|
||||
--sidebar-accent: oklch(0.92 0.02 20);
|
||||
--sidebar-accent-foreground: oklch(0.2 0.05 20);
|
||||
--sidebar-border: oklch(0.88 0.02 20);
|
||||
--sidebar-ring: oklch(0.7 0.2 10);
|
||||
--navbar: oklch(0.96 0.01 20);
|
||||
--navbar-foreground: oklch(0.2 0.05 20);
|
||||
--navbar-border: oklch(0.88 0.02 20);
|
||||
}
|
||||
|
||||
.dark.rose {
|
||||
--background: oklch(0.15 0.05 20);
|
||||
--foreground: oklch(0.9 0.05 20);
|
||||
--card: oklch(0.2 0.05 20);
|
||||
--card-foreground: oklch(0.9 0.05 20);
|
||||
--popover: oklch(0.22 0.05 20);
|
||||
--popover-foreground: oklch(0.9 0.05 20);
|
||||
--primary: oklch(0.7 0.2 10);
|
||||
--primary-foreground: oklch(0.1 0.05 20);
|
||||
--secondary: oklch(0.25 0.05 20);
|
||||
--secondary-foreground: oklch(0.9 0.05 20);
|
||||
--muted: oklch(0.25 0.05 20);
|
||||
--muted-foreground: oklch(0.7 0.05 20);
|
||||
--accent: oklch(0.3 0.05 20);
|
||||
--accent-foreground: oklch(0.9 0.05 20);
|
||||
--destructive: oklch(0.7 0.19 22);
|
||||
--destructive-foreground: oklch(0.2 0.05 20);
|
||||
--success: oklch(0.6 0.15 142);
|
||||
--success-foreground: oklch(0.98 0.01 20);
|
||||
--warning: oklch(0.7 0.15 38);
|
||||
--warning-foreground: oklch(0.2 0.05 20);
|
||||
--border: oklch(0.28 0.05 20);
|
||||
--input: oklch(0.35 0.05 20);
|
||||
--ring: oklch(0.7 0.2 10);
|
||||
--sidebar: oklch(0.1 0.05 20);
|
||||
--sidebar-foreground: oklch(0.9 0.05 20);
|
||||
--sidebar-primary: oklch(0.9 0.05 20);
|
||||
--sidebar-primary-foreground: oklch(0.1 0.05 20);
|
||||
--sidebar-accent: oklch(0.2 0.05 20);
|
||||
--sidebar-accent-foreground: oklch(0.9 0.05 20);
|
||||
--sidebar-border: oklch(0.25 0.05 20);
|
||||
--sidebar-ring: oklch(0.35 0.05 20);
|
||||
--navbar: oklch(0.1 0.05 20);
|
||||
--navbar-foreground: oklch(0.9 0.05 20);
|
||||
--navbar-border: oklch(0.25 0.05 20);
|
||||
}
|
||||
|
||||
.orange {
|
||||
--background: oklch(0.98 0.01 40);
|
||||
--foreground: oklch(0.2 0.05 40);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.2 0.05 40);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.2 0.05 40);
|
||||
--primary: oklch(0.7 0.2 50);
|
||||
--primary-foreground: oklch(0.98 0.01 40);
|
||||
--secondary: oklch(0.94 0.02 40);
|
||||
--secondary-foreground: oklch(0.2 0.05 40);
|
||||
--muted: oklch(0.94 0.02 40);
|
||||
--muted-foreground: oklch(0.5 0.05 40);
|
||||
--accent: oklch(0.94 0.02 40);
|
||||
--accent-foreground: oklch(0.2 0.05 40);
|
||||
--destructive: oklch(0.58 0.24 28);
|
||||
--destructive-foreground: oklch(0.98 0.01 40);
|
||||
--success: oklch(0.55 0.15 142);
|
||||
--success-foreground: oklch(0.98 0.01 40);
|
||||
--warning: oklch(0.65 0.15 38);
|
||||
--warning-foreground: oklch(0.2 0.05 40);
|
||||
--border: oklch(0.9 0.02 40);
|
||||
--input: oklch(0.9 0.02 40);
|
||||
--ring: oklch(0.7 0.2 50);
|
||||
--sidebar: oklch(0.96 0.01 40);
|
||||
--sidebar-foreground: oklch(0.2 0.05 40);
|
||||
--sidebar-primary: oklch(0.2 0.05 40);
|
||||
--sidebar-primary-foreground: oklch(0.98 0.01 40);
|
||||
--sidebar-accent: oklch(0.92 0.02 40);
|
||||
--sidebar-accent-foreground: oklch(0.2 0.05 40);
|
||||
--sidebar-border: oklch(0.88 0.02 40);
|
||||
--sidebar-ring: oklch(0.7 0.2 50);
|
||||
--navbar: oklch(0.96 0.01 40);
|
||||
--navbar-foreground: oklch(0.2 0.05 40);
|
||||
--navbar-border: oklch(0.88 0.02 40);
|
||||
}
|
||||
|
||||
.dark.orange {
|
||||
--background: oklch(0.15 0.05 40);
|
||||
--foreground: oklch(0.9 0.05 40);
|
||||
--card: oklch(0.2 0.05 40);
|
||||
--card-foreground: oklch(0.9 0.05 40);
|
||||
--popover: oklch(0.22 0.05 40);
|
||||
--popover-foreground: oklch(0.9 0.05 40);
|
||||
--primary: oklch(0.7 0.2 50);
|
||||
--primary-foreground: oklch(0.1 0.05 40);
|
||||
--secondary: oklch(0.25 0.05 40);
|
||||
--secondary-foreground: oklch(0.9 0.05 40);
|
||||
--muted: oklch(0.25 0.05 40);
|
||||
--muted-foreground: oklch(0.7 0.05 40);
|
||||
--accent: oklch(0.3 0.05 40);
|
||||
--accent-foreground: oklch(0.9 0.05 40);
|
||||
--destructive: oklch(0.7 0.19 22);
|
||||
--destructive-foreground: oklch(0.2 0.05 40);
|
||||
--success: oklch(0.6 0.15 142);
|
||||
--success-foreground: oklch(0.98 0.01 40);
|
||||
--warning: oklch(0.7 0.15 38);
|
||||
--warning-foreground: oklch(0.2 0.05 40);
|
||||
--border: oklch(0.28 0.05 40);
|
||||
--input: oklch(0.35 0.05 40);
|
||||
--ring: oklch(0.7 0.2 50);
|
||||
--sidebar: oklch(0.1 0.05 40);
|
||||
--sidebar-foreground: oklch(0.9 0.05 40);
|
||||
--sidebar-primary: oklch(0.9 0.05 40);
|
||||
--sidebar-primary-foreground: oklch(0.1 0.05 40);
|
||||
--sidebar-accent: oklch(0.2 0.05 40);
|
||||
--sidebar-accent-foreground: oklch(0.9 0.05 40);
|
||||
--sidebar-border: oklch(0.25 0.05 40);
|
||||
--sidebar-ring: oklch(0.35 0.05 40);
|
||||
--navbar: oklch(0.1 0.05 40);
|
||||
--navbar-foreground: oklch(0.9 0.05 40);
|
||||
--navbar-border: oklch(0.25 0.05 40);
|
||||
.dark {
|
||||
--background: 240 10% 3.9%;
|
||||
/* #09090B */
|
||||
--foreground: 0 0% 98%;
|
||||
/* #FAFAFA */
|
||||
--card: 240 10% 3.9%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
--popover: 240 10% 3.9%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
--primary: 0 0% 98%;
|
||||
--primary-foreground: 240 5.9% 10%;
|
||||
--secondary: 240 3.7% 20%;
|
||||
/* #27272A */
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
--muted: 240 3.7% 15.9%;
|
||||
--muted-foreground: 240 5% 64.9%;
|
||||
--accent: 240 3.7% 15.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 240 3.7% 15.9%;
|
||||
/* #27272A */
|
||||
--input: 240 3.7% 15.9%;
|
||||
--ring: 240 4.9% 83.9%;
|
||||
}
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--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);
|
||||
--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);
|
||||
--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);
|
||||
--color-navbar: var(--navbar);
|
||||
--color-navbar-foreground: var(--navbar-foreground);
|
||||
--color-navbar-border: var(--navbar-border);
|
||||
--color-background: hsl(var(--background));
|
||||
--color-foreground: hsl(var(--foreground));
|
||||
--color-card: hsl(var(--card));
|
||||
--color-card-foreground: hsl(var(--card-foreground));
|
||||
--color-popover: hsl(var(--popover));
|
||||
--color-popover-foreground: hsl(var(--popover-foreground));
|
||||
--color-primary: hsl(var(--primary));
|
||||
--color-primary-foreground: hsl(var(--primary-foreground));
|
||||
--color-secondary: hsl(var(--secondary));
|
||||
--color-secondary-foreground: hsl(var(--secondary-foreground));
|
||||
--color-muted: hsl(var(--muted));
|
||||
--color-muted-foreground: hsl(var(--muted-foreground));
|
||||
--color-accent: hsl(var(--accent));
|
||||
--color-accent-foreground: hsl(var(--accent-foreground));
|
||||
--color-destructive: hsl(var(--destructive));
|
||||
--color-destructive-foreground: hsl(var(--destructive-foreground));
|
||||
--color-border: hsl(var(--border));
|
||||
--color-input: hsl(var(--input));
|
||||
--color-ring: hsl(var(--ring));
|
||||
|
||||
--font-sans: var(--font-sans);
|
||||
--font-mono: var(--font-mono);
|
||||
--font-serif: var(--font-serif);
|
||||
--font-sans: var(--font-sans), sans-serif;
|
||||
--font-heading: var(--font-heading), serif;
|
||||
--font-mono: var(--font-geist-mono), monospace;
|
||||
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
|
||||
--shadow-2xs: var(--shadow-2xs);
|
||||
--shadow-xs: var(--shadow-xs);
|
||||
--shadow-sm: var(--shadow-sm);
|
||||
--shadow: var(--shadow);
|
||||
--shadow-md: var(--shadow-md);
|
||||
--shadow-lg: var(--shadow-lg);
|
||||
--shadow-xl: var(--shadow-xl);
|
||||
--shadow-2xl: var(--shadow-2xl);
|
||||
}
|
||||
|
||||
/* Base styles for proper defaults */
|
||||
* {
|
||||
border-color: var(--border);
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
@apply font-heading;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--foreground);
|
||||
background-image: radial-gradient(var(--border) 1px, transparent 1px);
|
||||
background-size: 24px 24px;
|
||||
background-attachment: fixed;
|
||||
@layer utilities {
|
||||
.animate-blob {
|
||||
animation: blob 7s infinite;
|
||||
}
|
||||
|
||||
.card-hover {
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 24px -10px hsl(var(--foreground) / 0.1);
|
||||
}
|
||||
|
||||
.button-hover {
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
|
||||
.button-hover:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px -4px hsl(var(--foreground) / 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blob {
|
||||
0% {
|
||||
transform: translate(0px, 0px) scale(1);
|
||||
}
|
||||
|
||||
33% {
|
||||
transform: translate(30px, -50px) scale(1.1);
|
||||
}
|
||||
|
||||
66% {
|
||||
transform: translate(-20px, 20px) scale(0.9);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(0px, 0px) scale(1);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user