[V0_FILE]javascript:file="tailwind.config.js" isEdit="true" isMerged="true" import { fontFamily } from "tailwindcss/defaultTheme" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { fontFamily: { sans: ["var(--font-sans)", ...fontFamily.sans], }, colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "#333333", foreground: "#FFFFFF", }, secondary: { DEFAULT: "#666666", foreground: "#FFFFFF", }, orange: { 500: "#F97316", }, }, }, }, } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import "@/styles/globals.css" import { Inter } from "next/font/google" import type React from "react" const inter = Inter({ subsets: ["latin"], variable: "--font-sans" }) export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { EmailSorter } from "@/components/email-sorter" import type { Metadata } from "next" export const metadata: Metadata = { title: "Email Sorter", description: "AI-powered email sorting and management", } export default function Page() { return } [V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]css:file="styles/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { body { @apply antialiased; background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='0.05' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E"); } } [V0_FILE]typescriptreact:file="components/circular-button.tsx" isMerged="true" import React from "react" import { motion } from "framer-motion" import { Inbox, Check, Clock, Lightbulb, Trash2 } from "lucide-react" const icons = [Inbox, Check, Clock, Lightbulb, Trash2] interface CircularButtonProps { currentIndex: number onClick: () => void } export function CircularButton({ currentIndex, onClick }: CircularButtonProps) { const Icon = icons[currentIndex] return ( ) } [V0_FILE]typescriptreact:file="components/email-sorter.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { format } from "date-fns" import { Check, Clock, Trash2, Lightbulb, Inbox } from "lucide-react" import { motion, AnimatePresence } from "framer-motion" import { cn } from "@/lib/utils" import { CircularButton } from "./circular-button" interface Email { id: string subject: string sender: string preview: string category?: "urgent" | "ghost" | "opportunity" | "delete" why?: string } export function EmailSorter() { const [emails, setEmails] = useState([ // Inbox { id: "1", subject: "Team Meeting Agenda", sender: "manager@company.com", preview: "Here's the agenda for our upcoming team meeting...", }, { id: "2", subject: "Weekly Newsletter", sender: "news@industry.com", preview: "Discover the latest trends in our industry...", }, { id: "3", subject: "Your Subscription Renewal", sender: "support@saas.com", preview: "Your subscription is due for renewal next month...", }, // Urgent { id: "4", subject: "Urgent: Client Presentation Review", sender: "client.relations@company.com", preview: "We need your input on the client presentation ASAP...", category: "urgent", why: "Client meeting tomorrow morning", }, { id: "5", subject: "Critical Bug in Production", sender: "devops@company.com", preview: "We've identified a critical bug affecting our main service...", category: "urgent", why: "Affecting user experience", }, // Ghost { id: "6", subject: "Office Supply Order", sender: "office.admin@company.com", preview: "Please review the attached office supply order for next quarter...", category: "ghost", }, { id: "7", subject: "Employee Satisfaction Survey", sender: "hr@company.com", preview: "We value your feedback. Please take a moment to complete our annual survey...", category: "ghost", }, // Opportunity { id: "8", subject: "Partnership Opportunity", sender: "business@potential.com", preview: "We would love to explore potential collaboration opportunities...", category: "opportunity", }, { id: "9", subject: "Speaking Engagement Invitation", sender: "conference@industry.com", preview: "We'd be honored to have you as a keynote speaker at our upcoming conference...", category: "opportunity", }, // Delete { id: "10", subject: "Limited Time Offer!", sender: "marketing@spam.com", preview: "Don't miss out on this exclusive deal...", category: "delete", }, { id: "11", subject: "You've Won!", sender: "lottery@definitely-not-a-scam.com", preview: "Congratulations! You've won our grand prize...", category: "delete", }, ]) const categories = [ { id: "inbox", label: "INBOX", icon: Inbox }, { id: "urgent", label: "MUST HANDLE TODAY", icon: Check }, { id: "ghost", label: "CAN GHOST 48H", icon: Clock }, { id: "opportunity", label: "OPPORTUNITIES", icon: Lightbulb }, { id: "delete", label: "DELETED", icon: Trash2 }, ] const [activeCategoryIndex, setActiveCategoryIndex] = useState(1) const categorizeEmail = (emailId: string, category: Email["category"]) => { setEmails(emails.map((email) => (email.id === emailId ? { ...email, category } : email))) } const filteredEmails = emails.filter((email) => { const activeCategory = categories[activeCategoryIndex].id if (activeCategory === "inbox") return !email.category return email.category === activeCategory }) const handleCircularButtonClick = () => { setActiveCategoryIndex((prevIndex) => (prevIndex + 1) % categories.length) } return (

{/* Categories and Header */}

{categories.slice(0, activeCategoryIndex + 1).map(({ id, label, icon: Icon }, index) => { const isActive = index === activeCategoryIndex return ( !isActive && setActiveCategoryIndex(index)} > {isActive ? (

{label}

{format(new Date(), "MMMM d yyyy - h:mmaaa")} - {Math.round(Math.random() * 30 + 60)}°

) : (

{label}

)} ) })}

{/* Remaining Categories */}

{categories.slice(activeCategoryIndex + 1).map(({ id, label, icon: Icon }) => ( setActiveCategoryIndex(categories.findIndex((cat) => cat.id === id))} > {label} ))}

{/* Email List */} {filteredEmails.map((email) => (

{email.subject}

{email.sender}

{email.preview}

{email.why &&

Why: {email.why}

}

{!email.category && (

{categories.slice(1, -1).map(({ id, icon: Icon }) => ( ))}

)}

))} {/* Circular Button */}

) }