[V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import "@/styles/globals.css" import { Inter } from "next/font/google" import type React from "react" // Import React const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "Problems Lister", description: "A premium web application to list and prioritize your problems", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]css:file="styles/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 222.2 84% 4.9%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 210 40% 98%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 212.7 26.8% 83.9%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Custom scrollbar for Webkit browsers */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 4px; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); } [V0_FILE]javascript:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="hooks/use-local-storage.ts" isMerged="true" import { useState } from "react" export function useLocalStorage(key: string, initialValue: T): [T, (value: T) => void] { // State to store our value // Pass initial state function to useState so logic is only executed once const [storedValue, setStoredValue] = useState(() => { if (typeof window === "undefined") { return initialValue } try { const item = window.localStorage.getItem(key) return item ? JSON.parse(item) : initialValue } catch (error) { console.log(error) return initialValue } }) // Return a wrapped version of useState's setter function that ... // ... persists the new value to localStorage. const setValue = (value: T) => { try { // Allow value to be a function so we have same API as useState const valueToStore = value instanceof Function ? value(storedValue) : value setStoredValue(valueToStore) if (typeof window !== "undefined") { window.localStorage.setItem(key, JSON.stringify(valueToStore)) } } catch (error) { console.log(error) } } return [storedValue, setValue] } [V0_FILE]typescriptreact:file="components/welcome-dialog.tsx" isMerged="true" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { ClipboardList, ArrowDownUp, Star } from "lucide-react" interface WelcomeDialogProps { open: boolean onOpenChange: (open: boolean) => void } export function WelcomeDialog({ open, onOpenChange }: WelcomeDialogProps) { return ( ) } [V0_FILE]typescript:file="hooks/use-problems-store.ts" isEdit="true" isMerged="true" import { useLocalStorage } from "./use-local-storage" export interface Problem { id: string content: string } export function useProblemsStore() { const [problems, setProblems] = useLocalStorage("problems", []) const addProblem = (content: string) => { if (content.trim() !== "") { const newProblem = { id: Date.now().toString(), content: content.trim(), } setProblems((prevProblems) => [...prevProblems, newProblem]) } } const deleteProblem = (id: string) => { setProblems((prevProblems) => prevProblems.filter((problem) => problem.id !== id)) } const reorderProblems = (oldIndex: number, newIndex: number) => { setProblems((prevProblems) => { const result = Array.from(prevProblems) const [removed] = result.splice(oldIndex, 1) result.splice(newIndex, 0, removed) return result }) } const clearAllProblems = () => { setProblems([]) } return { problems, addProblem, deleteProblem, reorderProblems, clearAllProblems, } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors, DragOverlay, defaultDropAnimationSideEffects, } from "@dnd-kit/core" import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, useSortable, } from "@dnd-kit/sortable" import { CSS } from "@dnd-kit/utilities" import { Plus, X, GripVertical, Sparkles } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { WelcomeDialog } from "@/components/welcome-dialog" import { useLocalStorage } from "@/hooks/use-local-storage" import { motion, AnimatePresence } from "framer-motion" import { useProblemsStore } from "@/hooks/use-problems-store" import { format } from "date-fns" const getPriorityColor = (problemCount: number) => { if (problemCount >= 10) return "rgb(239, 68, 68)" // red-500 if (problemCount >= 7) return "rgb(249, 115, 22)" // orange-500 if (problemCount >= 4) return "rgb(234, 179, 8)" // yellow-500 return "rgb(34, 197, 94)" // green-500 } const getPriorityText = (problemCount: number) => { if (problemCount >= 10) return "Critical" if (problemCount >= 7) return "High" if (problemCount >= 4) return "Medium" if (problemCount >= 1) return "Low" return "None" } interface SortableItemProps { id: string content: string index: number totalItems: number onDelete: (id: string) => void } function SortableItem({ id, content, index, totalItems, onDelete }: SortableItemProps) { const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id }) const style = { transform: CSS.Transform.toString(transform), transition, opacity: isDragging ? 0.5 : 1, ...getItemStyle(index, totalItems), } return (

{content}

) } const getItemStyle = (index: number, totalItems: number) => { const colorStops = [ { r: 255, g: 59, b: 48 }, // Red (Urgent) { r: 255, g: 149, b: 0 }, // Orange (High) { r: 255, g: 204, b: 0 }, // Yellow (Medium) { r: 40, g: 205, b: 65 }, // Green (Low) ] const position = index / (totalItems - 1 || 1) const colorIndex = position * (colorStops.length - 1) const lowerIndex = Math.floor(colorIndex) const upperIndex = Math.min(colorStops.length - 1, Math.ceil(colorIndex)) const ratio = colorIndex - lowerIndex const lowerColor = colorStops[lowerIndex] const upperColor = colorStops[upperIndex] const r = Math.round(lowerColor.r + (upperColor.r - lowerColor.r) * ratio) const g = Math.round(lowerColor.g + (upperColor.g - lowerColor.g) * ratio) const b = Math.round(lowerColor.b + (upperColor.b - lowerColor.b) * ratio) return { borderLeft: `4px solid rgba(${r}, ${g}, ${b}, 0.8)`, } } export default function ProblemsLister() { const { problems, addProblem, deleteProblem, reorderProblems, clearAllProblems } = useProblemsStore() const [newProblem, setNewProblem] = useState("") const [activeId, setActiveId] = useState(null) const [hasSeenWelcome, setHasSeenWelcome] = useLocalStorage("hasSeenWelcome", false) const [showWelcome, setShowWelcome] = useState(false) useEffect(() => { if (!hasSeenWelcome) { setShowWelcome(true) } }, [hasSeenWelcome]) const handleWelcomeClose = (open: boolean) => { setShowWelcome(open) if (!open) { setHasSeenWelcome(true) } } const sensors = useSensors( useSensor(PointerSensor, { activationConstraint: { distance: 8, }, }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates, }), ) const handleAddProblem = () => { if (newProblem.trim()) { addProblem(newProblem) setNewProblem("") // Clear the input after adding } } const handleDragStart = (event: any) => { setActiveId(event.active.id) } const handleDragEnd = (event: any) => { const { active, over } = event if (over && active.id !== over.id) { const oldIndex = problems.findIndex((item) => item.id === active.id) const newIndex = problems.findIndex((item) => item.id === over.id) reorderProblems(oldIndex, newIndex) } setActiveId(null) } const handleDragCancel = () => { setActiveId(null) } const handleKeyPress = (e: React.KeyboardEvent) => { if (e.key === "Enter") { handleAddProblem() } } const dropAnimation = { sideEffects: defaultDropAnimationSideEffects({ styles: { active: { opacity: "0.5", }, }, }), } return (

Problems Lister

Organize and prioritize your challenges

{format(new Date(), "MMMM d, yyyy")}

setNewProblem(e.target.value)} onKeyPress={handleKeyPress} placeholder="What's bothering you today?" className="flex-grow bg-white/5 border-white/10 text-white/80 placeholder:text-white/40" />

p.id)} strategy={verticalListSortingStrategy}> {problems.length === 0 ? ( No problems yet. Add one to get started! ) : (

))}

)} {activeId ? (

{problems.find((p) => p.id === activeId)?.content}

) : null}

Problem Summary

Total problems:

{problems.length}

Level:

{getPriorityText(problems.length)}

{problems.length > 0 && ( )}

Created with ❤️ by{" "} @Shubhraj

) }

List Your Problems

Drag to Prioritize

Visual Priority

Problems Lister

Problem Summary

About

About