[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

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This