[V0_FILE]typescriptreact:file="components/ui/sidebar.tsx" isMerged="true" "use client" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const sidebarVariants = cva( "relative flex h-full w-full flex-col overflow-hidden border-r bg-background data-[collapsed=true]:w-[--sidebar-collapsed-width]", { variants: { variant: { default: "border-border", outline: "border-border", ghost: "border-transparent", }, }, defaultVariants: { variant: "default", }, }, ) interface SidebarContextValue { collapsed: boolean setCollapsed: React.Dispatch> isHovered: boolean setIsHovered: React.Dispatch> } const SidebarContext = React.createContext(undefined) function useSidebarContext() { const context = React.useContext(SidebarContext) if (!context) { throw new Error("useSidebarContext must be used within a SidebarProvider") } return context } interface SidebarProviderProps { collapsed?: boolean defaultCollapsed?: boolean onCollapsedChange?: (collapsed: boolean) => void children: React.ReactNode } function SidebarProvider({ collapsed: controlledCollapsed, defaultCollapsed = false, onCollapsedChange, children, }: SidebarProviderProps) { const [uncontrolledCollapsed, setUncontrolledCollapsed] = React.useState(defaultCollapsed) const [isHovered, setIsHovered] = React.useState(false) const collapsed = controlledCollapsed !== undefined ? controlledCollapsed : uncontrolledCollapsed const setCollapsed = React.useCallback( (value: React.SetStateAction) => { const newValue = typeof value === "function" ? value(uncontrolledCollapsed) : value setUncontrolledCollapsed(newValue) onCollapsedChange?.(newValue) }, [onCollapsedChange, uncontrolledCollapsed], ) const contextValue = React.useMemo( () => ({ collapsed, setCollapsed, isHovered, setIsHovered, }), [collapsed, setCollapsed, isHovered, setIsHovered], ) return {children} } interface SidebarProps extends React.HTMLAttributes, VariantProps { collapsed?: boolean defaultCollapsed?: boolean onCollapsedChange?: (collapsed: boolean) => void } const Sidebar = React.forwardRef( ( { className, variant, collapsed: controlledCollapsed, defaultCollapsed = false, onCollapsedChange, ...props }, ref, ) => { return ( ) }, ) Sidebar.displayName = "Sidebar" const SidebarImplementation = React.forwardRef( ({ className, variant, ...props }, ref) => { const { collapsed, isHovered, setIsHovered } = useSidebarContext() return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} {...props} /> ) }, ) SidebarImplementation.displayName = "SidebarImplementation" const SidebarTrigger = React.forwardRef>( ({ className, children, ...props }, ref) => { const { collapsed, setCollapsed } = useSidebarContext() return ( ) }, ) SidebarTrigger.displayName = "SidebarTrigger" const SidebarContent = React.forwardRef>( ({ className, ...props }, ref) => { return

}, ) SidebarContent.displayName = "SidebarContent" const SidebarHeader = React.forwardRef>( ({ className, ...props }, ref) => { return

}, ) SidebarHeader.displayName = "SidebarHeader" const SidebarFooter = React.forwardRef>( ({ className, ...props }, ref) => { return

}, ) SidebarFooter.displayName = "SidebarFooter" const SidebarGroup = React.forwardRef>( ({ className, ...props }, ref) => { return

}, ) SidebarGroup.displayName = "SidebarGroup" const SidebarGroupLabel = React.forwardRef>( ({ className, ...props }, ref) => { const { collapsed, isHovered } = useSidebarContext() return (

) }, ) SidebarGroupLabel.displayName = "SidebarGroupLabel" const SidebarGroupContent = React.forwardRef>( ({ className, ...props }, ref) => { return

}, ) SidebarGroupContent.displayName = "SidebarGroupContent" const SidebarMenu = React.forwardRef>( ({ className, ...props }, ref) => { return

}, ) SidebarMenu.displayName = "SidebarMenu" interface SidebarMenuItemProps extends React.HTMLAttributes { isActive?: boolean } const SidebarMenuItem = React.forwardRef(({ className, ...props }, ref) => { return

}) SidebarMenuItem.displayName = "SidebarMenuItem" interface SidebarMenuButtonProps extends React.ButtonHTMLAttributes { isActive?: boolean } const SidebarMenuButton = React.forwardRef( ({ className, isActive, ...props }, ref) => { const { collapsed, isHovered } = useSidebarContext() return ( )}

) } [V0_FILE]json:file="package.json" type="code" isMerged="true" { "dependencies": { "html2canvas": "^1.4.1" } } [V0_FILE]typescriptreact:file="components/tier-list-generator.tsx" isEdit="true" "use client" import type React from "react" import { useState, useRef, useCallback } from "react" import { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors, type DragEndEvent, type DragStartEvent, DragOverlay, type UniqueIdentifier, pointerWithin, rectIntersection, } from "@dnd-kit/core" import { arrayMove, SortableContext, sortableKeyboardCoordinates, horizontalListSortingStrategy, } from "@dnd-kit/sortable" import { Button } from "@/components/ui/button" import { Plus, Minus, Upload, ClipboardCopy, Check } from "lucide-react" import TierRow from "./tier-row" import SortableItem from "./sortable-item" import { useDroppable } from "@dnd-kit/core" // Define the tier colors based on the image const TIER_COLORS = { S: "#f87171", // Red/Salmon A: "#fbbf24", // Orange/Gold B: "#fde047", // Yellow C: "#4ade80", // Green D: "#60a5fa", // Blue E: "#a78bfa", // Purple F: "#f472b6", // Pink G: "#94a3b8", // Slate H: "#d6d3d1", // Stone I: "#a1a1aa", // Zinc } // Get tier letters in order const TIER_LETTERS = Object.keys(TIER_COLORS) export type TierItem = { id: string image: string title: string // Keep for alt text tierId: string | null // null means it's in the staging area } export default function TierListGenerator() { // Start with tiers S through D const [tiers, setTiers] = useState(TIER_LETTERS.slice(0, 5)) const [items, setItems] = useState([]) const [activeId, setActiveId] = useState(null) const [shareStatus, setShareStatus] = useState(null) const [copySuccess, setCopySuccess] = useState(false) const [tierTitle, setTierTitle] = useState("") const fileInputRef = useRef(null) const tierListRef = useRef(null) const sensors = useSensors( useSensor(PointerSensor, { // Lower the activation constraint for better responsiveness activationConstraint: { distance: 5, // 5px movement before drag starts }, }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates, }), ) const handleDragStart = (event: DragStartEvent) => { setActiveId(event.active.id) } const handleDragEnd = (event: DragEndEvent) => { const { active, over } = event if (!over) return if (active.id !== over.id) { setItems((items) => { const oldIndex = items.findIndex((item) => item.id === active.id) const newIndex = items.findIndex((item) => item.id === over.id) return arrayMove(items, oldIndex, newIndex) }) } setActiveId(null) } const handleDragOver = useCallback((event: any) => { const { active, over } = event if (!over) return // If dragging over a tier if (over.id.toString().startsWith("tier-") && active.id !== over.id) { const tierId = over.id.toString().replace("tier-", "") setItems((items) => items.map((item) => (item.id === active.id ? { ...item, tierId } : item))) } // If dragging over the staging area if (over.id === "staging-area" && active.id !== over.id) { setItems((items) => items.map((item) => (item.id === active.id ? { ...item, tierId: null } : item))) } }, []) const handleDragEndWithCleanup = (event: DragEndEvent) => { // Handle the normal drag end handleDragEnd(event) } const handleFileUpload = (e: React.ChangeEvent) => { const files = e.target.files if (!files || files.length === 0) return Array.from(files).forEach((file) => { const reader = new FileReader() reader.onload = (event) => { if (event.target && event.target.result) { const newItem: TierItem = { id: `item-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, image: event.target.result.toString(), title: file.name.split(".")[0] || "Image", // Keep for alt text only tierId: null, // Add to staging area } setItems((prevItems) => [...prevItems, newItem]) } } reader.readAsDataURL(file) }) // Reset the file input if (fileInputRef.current) { fileInputRef.current.value = "" } } const addTier = () => { if (tiers.length < 9) { // Max 9 tiers (S to I) setTiers(TIER_LETTERS.slice(0, tiers.length + 1)) } } const removeTier = () => { if (tiers.length > 1) { const newTiers = TIER_LETTERS.slice(0, tiers.length - 1) // Move items from the removed tier to the tier above const removedTier = TIER_LETTERS[tiers.length - 1] const newItems = items.map((item) => item.tierId === removedTier ? { ...item, tierId: TIER_LETTERS[tiers.length - 2] } : item, ) setTiers(newTiers) setItems(newItems) } } const deleteItem = (id: string) => { setItems(items.filter((item) => item.id !== id)) } const copyTierListToClipboard = async () => { if (!tierListRef.current) return try { setShareStatus("...") setCopySuccess(false) // Dynamically import html2canvas to reduce initial bundle size const html2canvasModule = await import("html2canvas") const html2canvas = html2canvasModule.default const canvas = await html2canvas(tierListRef.current, { backgroundColor: "#000000", scale: 2, // Higher quality }) // Convert canvas to blob canvas.toBlob(async (blob) => { if (!blob) { setShareStatus("❌") setTimeout(() => { setShareStatus(null) setCopySuccess(false) }, 2000) return } try { // Create a ClipboardItem and write to clipboard const item = new ClipboardItem({ "image/png": blob }) await navigator.clipboard.write([item]) setShareStatus(null) setCopySuccess(true) setTimeout(() => { setShareStatus(null) setCopySuccess(false) }, 2000) } catch (err) { console.error("Clipboard error:", err) // Fallback: offer download const url = URL.createObjectURL(blob) const link = document.createElement("a") link.href = url link.download = "tier-list.png" document.body.appendChild(link) link.click() document.body.removeChild(link) setShareStatus("↓") setTimeout(() => { setShareStatus(null) setCopySuccess(false) }, 2000) } }, "image/png") } catch (err) { console.error("Screenshot error:", err) setShareStatus("❌") setTimeout(() => { setShareStatus(null) setCopySuccess(false) }, 2000) } } // Find the active item const activeItem = activeId ? items.find((item) => item.id === activeId) : null // Get items in the staging area const stagingItems = items.filter((item) => item.tierId === null) // Staging area droppable const { setNodeRef: setStagingRef, isOver: isOverStaging } = useDroppable({ id: "staging-area", }) return (

{ // First try pointerWithin for more intuitive dragging const pointerCollisions = pointerWithin(args) if (pointerCollisions.length > 0) return pointerCollisions // Fall back to rectIntersection for edge cases return rectIntersection(args) }} onDragStart={handleDragStart} onDragEnd={handleDragEndWithCleanup} onDragOver={handleDragOver} >

{/* Title input */} setTierTitle(e.target.value)} placeholder="Enter tier list title" className="w-full text-center text-xl font-bold bg-transparent border-none outline-none text-white placeholder-gray-500 mb-2" aria-label="Tier list title" /> {/* Tier list */}

{tiers.map((tier) => ( item.tierId === tier)} onDelete={deleteItem} /> ))}

{/* Controls below tier list */}

Tiers:

{copySuccess ? (

Copied to clipboard

) : ( )}

{/* Staging area */}

item.id)} strategy={horizontalListSortingStrategy}> {stagingItems.map((item) => ( deleteItem(item.id)} /> ))}

item.id)} strategy={horizontalListSortingStrategy}> {/* Overlay for the dragged item */} {activeItem ? (

) : null}

) }

About

Tags

Share

More from christianelton

More Templates Like This

About

Tags

Share

About

Tags

Share

More from christianelton

More Templates Like This