git/snippet-pastebin
1
0
Fork 0
mirror of https://github.com/johndoe6345789/snippet-pastebin.git synced 2026-04-24 13:34:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Generated by Spark: I want the app to be a snippet pastebin - the component library showcase should just be a seconary thing on a hamburger menu

Browse Source
This commit is contained in:
johndoe6345789
2026-01-17 16:36:05 +00:00
committed by GitHub
parent 812aa471b6
commit f692b1c3b4
4 changed files with 281 additions and 425 deletions
Download Patch File Download Diff File Expand all files Collapse all files

403
PRD.md
View File

@@ -1,261 +1,142 @@
# Planning Guide
A comprehensive atomic design system showcasing reusable component patterns organized by atomic design principles - demonstrating atoms, molecules, organisms, and templates in a living component library.
**Experience Qualities**:
1. **Systematic** - Components should demonstrate clear organizational hierarchy from smallest atoms to complex organisms, making the design system easy to understand and navigate.
2. **Expressive** - Each component should showcase rich visual variety, multiple variants, states, and customization options that inspire creative usage.
3. **Practical** - Examples should reflect real-world use cases with working interactions, not just static displays.
- Trigger: Navigate t
**Molecular Component Displa
- Purpose: Shows how atoms combine into functional UI patterns
- Progression: User views section → Composed components display → User interacts
- Functionality: Presents complex components (navigation bars, data tables, forms, feature sections)
- Success criteria: All base components visible, interactive, showing hover/active/disabled states
**Molecular Component Display**
- Functionality: Displays composed components (form fields with labels, search bars, cards with actions, navigation items)
- Purpose: Shows how atoms combine into functional UI patterns
- Trigger: Navigate to Molecules section
- Progression: User views section → Composed components display → User interacts with working examples → Sees practical combinations
- Success criteria: Component compositions are clear, interactions work, relationships between atoms are visible
**Organism Component Display**
- Functionality: Presents complex components (navigation bars, data tables, forms, feature sections)
- Purpose: Demonstrates production-ready component patterns with full functionality
- Trigger: Navigate to Organisms section
- Progression: User views section → Complex patterns display → User interacts with realistic examples → Sees complete use cases
- Success criteria: Organisms feel production-ready, interactions are smooth, use cases are clear
**Template Showcase**
- Functionality: Shows complete page layouts combining multiple organisms
- Purpose: Demonstrates how all components work together in real applications
- Trigger: Navigate to Templates section
- Progression: User views section → Full page examples display → User sees complete compositions → Layout patterns are clear
- Success criteria: Templates show realistic page structures, responsive behavior visible
**Interactive Component Playground**
- Functionality: Live component customization with variant switching and prop controls
- Purpose: Allows experimentation with component options and configurations
- Trigger: Click on any component example
- Progression: User clicks component → Customization panel opens → User toggles variants → Component updates in real-time → Code snippet shows
- Success criteria: Controls work smoothly, visual feedback is immediate, code examples are accurate
**Navigation System**
- Functionality: Tabbed interface for switching between atomic levels with smooth transitions
- Purpose: Clear organization and easy browsing of the component hierarchy
- Trigger: Click tab or section link
- Progression: User clicks navigation → Smooth transition to section → Components load and display → Active state updates
- Success criteria: Navigation is intuitive, transitions are smooth, current location is always clear
## Edge Case Handling
- **Empty States**: Show placeholder when no components in a category
- **Long Content**: Handle component examples with overflow/truncation gracefully
- **Mobile View**: Adapt grid layouts to single column, stack complex examples
- **Interaction States**: Clearly show all states (default, hover, active, focus, disabled)
- **Variant Overflow**: Handle components with many variants using tabs or dropdowns
- **Code Display**: Syntax highlighting for code examples with copy functionality
## Design Direction
The design should evoke **craftsmanship, clarity, and inspiration** - like a meticulously organized workshop where every tool has its place. The interface should feel like a premium design system documentation site with rich visual examples, smooth interactions, and thoughtful categorization that makes finding the right component effortless.
## Color Selection
A sophisticated, artistic palette that breaks from typical design system documentation.
- **Primary Color**: Rich Plum (oklch(0.50 0.18 310)) - Distinctive and creative, used for primary actions and highlights
- **Secondary Colors**:
- Deep Purple (oklch(0.20 0.12 310)) for depth and elevated surfaces
- Muted Violet (oklch(0.30 0.08 310)) for secondary elements and borders
- **Accent Color**: Vibrant Coral (oklch(0.72 0.20 25)) - Eye-catching warmth for active states, badges, and emphasis
- **Background**: Near Black (oklch(0.12 0.02 310)) - Rich dark foundation
- **Foreground/Background Pairings**:
- Background (Near Black oklch(0.12 0.02 310)): Light Lavender (oklch(0.94 0.02 310)) - Ratio 14.8:1 ✓
- Primary (Rich Plum oklch(0.50 0.18 310)): White text (oklch(0.98 0 0)) - Ratio 6.2:1 ✓
- Accent (Vibrant Coral oklch(0.72 0.20 25)): Deep Purple text (oklch(0.20 0.12 310)) - Ratio 8.5:1 ✓
- Card (Deep Purple oklch(0.20 0.12 310)): Light Lavender (oklch(0.94 0.02 310)) - Ratio 11.2:1 ✓
## Font Selection
Typography should feel modern and editorial, with excellent readability for code and prose.
- **Typographic Hierarchy**:
- Page Title: Bricolage Grotesque Bold/48px/tight letter spacing - Editorial presence
- Section Headers: Bricolage Grotesque Semibold/32px/normal spacing - Clear hierarchy
- Component Names: Bricolage Grotesque Medium/20px/normal spacing - Distinctive labels
- Body Text: Inter Regular/16px/relaxed line-height - Comfortable reading
- Code: JetBrains Mono Regular/14px/monospace - Technical precision
## Animations
Animations should feel polished and purposeful - components should have subtle entrance animations using staggered fades, tabs should transition smoothly with sliding indicators, interactive elements should respond with gentle scale and color transitions (150-200ms), and the component playground should animate property changes. Hover states use quick 100ms transitions while section changes use slower 300ms fades for comprehension.
## Component Selection
- **Components**:
- Tabs (shadcn) for main navigation between atomic levels with underline indicator
- Card (shadcn) for component examples with elevated shadow
- Badge (shadcn) for variant labels and status indicators
- Button (shadcn) for all interactive controls with multiple variants
- Separator (shadcn) for visual grouping and section division
- Dialog (shadcn) for component playground modal
- Scroll Area (shadcn) for code examples and long content
- Tooltip (shadcn) for additional component information
- **Customizations**:
- Custom grid system for component layout with responsive columns
- Component preview frame with dark/light background toggle
- Code block component with syntax highlighting using Monaco
- Section header with animated gradient underline
- Navigation breadcrumb for atomic level context
- Variant switcher component for toggling between options
- **States**:
- Tabs: underline slides smoothly, active tab has accent color, inactive are muted
- Cards: default has subtle shadow, hover lifts with larger shadow, active state slightly depressed
- Buttons: comprehensive state examples (default, hover, active, focus, disabled, loading)
- Interactive elements: scale slightly on hover (1.02), depress on active (0.98)
- **Icon Selection**:
- Atom (bold) for atomic level
- MolecularStructure (bold) for molecular level
- FlowArrow (bold) for organism level
- Layout (bold) for templates
- Code (regular) for code examples
- Copy (regular) for copy actions
- Eye (regular) for preview
- Palette (regular) for theming
- **Spacing**:
- Page container: px-8 py-12
- Section spacing: space-y-16
- Component grid: gap-8
- Card padding: p-6
- Inner component spacing: gap-4
- Tight groupings: gap-2
- **Mobile**:
- Single column layout for component grids
- Tabs become full-width scrollable with arrows
- Reduce title sizes: Page Title 32px, Section Headers 24px
- Card padding reduces to p-4
- Stack playground controls vertically
- Maintain 44px touch targets for all interactive elements
- Purpose: Demonstrates production-ready component patterns with full functionality
- Trigger: Navigate to Organisms section
- Progression: User views section → Complex patterns display → User interacts with realistic examples → Sees complete use cases
- Success criteria: Organisms feel production-ready, interactions are smooth, use cases are clear
**Template Showcase**
- Functionality: Shows complete page layouts combining multiple organisms
- Purpose: Demonstrates how all components work together in real applications
- Trigger: Navigate to Templates section
- Progression: User views section → Full page examples display → User sees complete compositions → Layout patterns are clear
- Success criteria: Templates show realistic page structures, responsive behavior visible
**Interactive Component Playground**
- Functionality: Live component customization with variant switching and prop controls
- Purpose: Allows experimentation with component options and configurations
- Trigger: Click on any component example
- Progression: User clicks component → Customization panel opens → User toggles variants → Component updates in real-time → Code snippet shows
- Success criteria: Controls work smoothly, visual feedback is immediate, code examples are accurate
**Navigation System**
- Functionality: Tabbed interface for switching between atomic levels with smooth transitions
- Purpose: Clear organization and easy browsing of the component hierarchy
- Trigger: Click tab or section link
- Progression: User clicks navigation → Smooth transition to section → Components load and display → Active state updates
- Success criteria: Navigation is intuitive, transitions are smooth, current location is always clear
## Edge Case Handling
- **Empty States**: Show placeholder when no components in a category
- **Long Content**: Handle component examples with overflow/truncation gracefully
- **Mobile View**: Adapt grid layouts to single column, stack complex examples
- **Interaction States**: Clearly show all states (default, hover, active, focus, disabled)
- **Variant Overflow**: Handle components with many variants using tabs or dropdowns
- **Code Display**: Syntax highlighting for code examples with copy functionality
## Design Direction
The design should evoke **craftsmanship, clarity, and inspiration** - like a meticulously organized workshop where every tool has its place. The interface should feel like a premium design system documentation site with rich visual examples, smooth interactions, and thoughtful categorization that makes finding the right component effortless.
## Color Selection
A sophisticated, artistic palette that breaks from typical design system documentation.
- **Primary Color**: Rich Plum (oklch(0.50 0.18 310)) - Distinctive and creative, used for primary actions and highlights
- **Secondary Colors**:
- Deep Purple (oklch(0.20 0.12 310)) for depth and elevated surfaces
- Muted Violet (oklch(0.30 0.08 310)) for secondary elements and borders
- **Accent Color**: Vibrant Coral (oklch(0.72 0.20 25)) - Eye-catching warmth for active states, badges, and emphasis
- **Background**: Near Black (oklch(0.12 0.02 310)) - Rich dark foundation
- **Foreground/Background Pairings**:
- Background (Near Black oklch(0.12 0.02 310)): Light Lavender (oklch(0.94 0.02 310)) - Ratio 14.8:1 ✓
- Primary (Rich Plum oklch(0.50 0.18 310)): White text (oklch(0.98 0 0)) - Ratio 6.2:1 ✓
- Accent (Vibrant Coral oklch(0.72 0.20 25)): Deep Purple text (oklch(0.20 0.12 310)) - Ratio 8.5:1 ✓
- Card (Deep Purple oklch(0.20 0.12 310)): Light Lavender (oklch(0.94 0.02 310)) - Ratio 11.2:1 ✓
## Font Selection
Typography should feel modern and editorial, with excellent readability for code and prose.
- **Typographic Hierarchy**:
- Page Title: Bricolage Grotesque Bold/48px/tight letter spacing - Editorial presence
- Section Headers: Bricolage Grotesque Semibold/32px/normal spacing - Clear hierarchy
- Component Names: Bricolage Grotesque Medium/20px/normal spacing - Distinctive labels
- Body Text: Inter Regular/16px/relaxed line-height - Comfortable reading
- Code: JetBrains Mono Regular/14px/monospace - Technical precision
## Animations
Animations should feel polished and purposeful - components should have subtle entrance animations using staggered fades, tabs should transition smoothly with sliding indicators, interactive elements should respond with gentle scale and color transitions (150-200ms), and the component playground should animate property changes. Hover states use quick 100ms transitions while section changes use slower 300ms fades for comprehension.
## Component Selection
- **Components**:
- Tabs (shadcn) for main navigation between atomic levels with underline indicator
- Card (shadcn) for component examples with elevated shadow
- Badge (shadcn) for variant labels and status indicators
- Button (shadcn) for all interactive controls with multiple variants
- Separator (shadcn) for visual grouping and section division
- Dialog (shadcn) for component playground modal
- Scroll Area (shadcn) for code examples and long content
- Tooltip (shadcn) for additional component information
- **Customizations**:
- Custom grid system for component layout with responsive columns
- Component preview frame with dark/light background toggle
- Code block component with syntax highlighting using Monaco
- Section header with animated gradient underline
- Navigation breadcrumb for atomic level context
- Variant switcher component for toggling between options
- **States**:
- Tabs: underline slides smoothly, active tab has accent color, inactive are muted
- Cards: default has subtle shadow, hover lifts with larger shadow, active state slightly depressed
- Buttons: comprehensive state examples (default, hover, active, focus, disabled, loading)
- Interactive elements: scale slightly on hover (1.02), depress on active (0.98)
- **Icon Selection**:
- Atom (bold) for atomic level
- MolecularStructure (bold) for molecular level
- FlowArrow (bold) for organism level
- Layout (bold) for templates
- Code (regular) for code examples
- Copy (regular) for copy actions
- Eye (regular) for preview
- Palette (regular) for theming
- **Spacing**:
- Page container: px-8 py-12
- Section spacing: space-y-16
- Component grid: gap-8
- Card padding: p-6
- Inner component spacing: gap-4
- Tight groupings: gap-2
- **Mobile**:
- Single column layout for component grids
- Tabs become full-width scrollable with arrows
- Reduce title sizes: Page Title 32px, Section Headers 24px
- Card padding reduces to p-4
- Stack playground controls vertically
- Maintain 44px touch targets for all interactive elements
# Planning Guide
A modern snippet pastebin for developers to share, organize, and discover code snippets with syntax highlighting, live previews, and organized collections.
**Experience Qualities**:
1. **Efficient** - Quick snippet creation and sharing with minimal friction, optimized for developers who need to paste and share code instantly.
2. **Organized** - Clear categorization and filtering that makes finding and managing snippets effortless.
3. **Delightful** - Beautiful syntax highlighting, smooth interactions, and a refined interface that makes code sharing feel premium.
**Complexity Level**: Light Application (multiple features with basic state) - A pastebin with create, view, organize, and search functionality, with an additional component library showcase as a secondary feature.
## Essential Features
**Snippet Creation**
- Functionality: Quick form to paste code, add title/description, select language
- Purpose: Enable rapid snippet sharing and storage
- Trigger: Click "New Snippet" button or land on homepage
- Progression: User clicks new snippet → Form appears → User pastes code → Adds metadata → Saves → Snippet displays with shareable view
- Success criteria: Form is fast, syntax highlighting preview works, saving is instant
**Snippet Viewing**
- Functionality: Display snippet with syntax highlighting, metadata, and actions
- Purpose: Beautiful presentation of code with copy functionality
- Trigger: Click on snippet card or navigate to snippet
- Progression: User selects snippet → Full view displays → Code renders with highlighting → User can copy/edit/delete
- Success criteria: Code is readable, actions are clear, copying works smoothly
**Snippet Organization**
- Functionality: Filter and sort snippets by language, category, or date
- Purpose: Easy management of growing snippet collections
- Trigger: Use filter controls or search
- Progression: User applies filter → Results update instantly → Snippets display organized → Clear indication of active filters
- Success criteria: Filtering is instant, results are accurate, empty states are helpful
**Code Preview (for React/HTML)**
- Functionality: Live preview of React components and HTML snippets
- Purpose: See rendered output alongside code
- Trigger: Automatic for supported languages
- Progression: Snippet loads → Preview compiles → Rendered result displays → Preview updates on edit
- Success criteria: Preview renders accurately, errors are handled gracefully
**Component Library (Secondary Feature)**
- Functionality: Showcase of atomic design components accessible via hamburger menu
- Purpose: Secondary reference for design system components
- Trigger: Click hamburger menu → Select "Components"
- Progression: User opens menu → Selects component section → Components display → User can save examples as snippets
- Success criteria: Easy access from menu, can be dismissed, components can be copied to main snippets
## Edge Case Handling
- **Empty State**: Show welcoming empty state with "Create your first snippet" CTA
- **Long Code**: Handle large snippets with scrollable code blocks and truncation in list view
- **Invalid Code**: Show preview gracefully when code doesn't compile
- **No Language Selected**: Default to plain text with no highlighting
- **Mobile View**: Single column layout, simplified toolbar, collapsible sections
- **Duplicate Titles**: Allow duplicates but show creation date for disambiguation
## Design Direction
The design should evoke **precision, creativity, and speed** - like a beautifully crafted developer tool that feels both powerful and approachable. The interface should feel like a premium code editor with rich syntax highlighting, smooth animations, and thoughtful spacing that makes code the hero.
## Color Selection
A developer-focused palette with strong contrast and code editor aesthetics.
- **Primary Color**: Electric Violet (oklch(0.55 0.20 280)) - Modern and technical, used for primary actions and highlights
- **Secondary Colors**:
- Deep Slate (oklch(0.18 0.02 280)) for elevated surfaces and cards
- Muted Indigo (oklch(0.28 0.04 280)) for secondary elements and borders
- **Accent Color**: Neon Cyan (oklch(0.75 0.18 200)) - Eye-catching highlight for active states, syntax elements, and CTAs
- **Background**: Rich Black (oklch(0.10 0.01 280)) - Deep, focused background
- **Foreground/Background Pairings**:
- Background (Rich Black oklch(0.10 0.01 280)): Bright White (oklch(0.96 0.01 280)) - Ratio 16.2:1 ✓
- Primary (Electric Violet oklch(0.55 0.20 280)): White text (oklch(0.98 0 0)) - Ratio 5.8:1 ✓
- Accent (Neon Cyan oklch(0.75 0.18 200)): Deep Slate text (oklch(0.18 0.02 280)) - Ratio 9.8:1 ✓
- Card (Deep Slate oklch(0.18 0.02 280)): Bright White (oklch(0.96 0.01 280)) - Ratio 12.5:1 ✓
## Font Selection
Typography should feel technical yet refined, optimized for reading code and developer content.
- **Typographic Hierarchy**:
- App Title: JetBrains Mono Bold/32px/tight spacing - Technical and distinctive
- Section Headers: Inter Semibold/24px/normal spacing - Clean hierarchy
- Snippet Titles: Inter Medium/18px/normal spacing - Clear labels
- Body Text: Inter Regular/15px/relaxed line-height - Comfortable reading
- Code: JetBrains Mono Regular/14px/monospace - Optimal code readability
## Animations
Animations should feel snappy and developer-focused - snippets should fade in with slight upward motion (200ms), the new snippet form should slide in smoothly (250ms), syntax highlighting should appear progressively, copy actions should provide instant visual feedback with a subtle scale pulse, and the hamburger menu should slide from the side with backdrop fade. Hover states are quick (100ms) while view transitions use 200ms for clarity.
## Component Selection
- **Components**:
- Sheet (shadcn) for hamburger menu sidebar
- Card (shadcn) for snippet cards with hover elevation
- Button (shadcn) for all actions with icon variants
- Input (shadcn) for search and form fields
- Select (shadcn) for language and category selection
- Textarea (shadcn) for code input
- Badge (shadcn) for language tags and metadata
- Separator (shadcn) for visual grouping
- Dialog (shadcn) for delete confirmations
- Scroll Area (shadcn) for code display
- Tabs (shadcn) for code/preview toggle
- **Customizations**:
- Custom syntax highlighter using Monaco editor for code display
- Snippet preview component with live rendering for React/HTML
- Filter bar component with combined search/language/sort controls
- Empty state component with illustration and CTA
- Copy button with success animation
- Floating action button for new snippet (mobile)
- **States**:
- Cards: subtle shadow on default, lift on hover with accent border, selected state with accent glow
- Buttons: primary uses accent gradient, hover brightens, active depresses, copy button shows checkmark on success
- Menu: backdrop darkens when open, sheet slides in from left with spring animation
- Form inputs: focus shows accent ring, filled state has subtle background
- **Icon Selection**:
- Plus (bold) for new snippet
- Copy (regular) for copy action with check animation
- List (bold) for hamburger menu
- Code (bold) for snippet icon
- Trash (regular) for delete
- MagnifyingGlass (regular) for search
- FunnelSimple (regular) for filters
- Eye (regular) for preview toggle
- **Spacing**:
- Page container: px-6 py-8
- Snippet grid: gap-6
- Card padding: p-5
- Form sections: space-y-6
- Input grouping: gap-3
- Tight groups: gap-2
- **Mobile**:
- Single column snippet grid
- Floating action button (bottom right) for new snippet
- Simplified header with just logo and menu
- Full-screen snippet view on mobile
- Reduce title sizes proportionally
- Maintain 44px touch targets
- Code blocks scroll horizontally with syntax wrap option

2
index.html
View File

@@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Atomic Component Library</title>
<title>CodeSnippet - Share & Organize Code</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

265
src/App.tsx
View File

@@ -1,11 +1,13 @@
import { useState, useCallback } from 'react'
import { useKV } from '@github/spark/hooks'
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Button } from '@/components/ui/button'
import { motion } from 'framer-motion'
import {
Atom,
FlowArrow,
Palette,
List,
Layout,
Code,
} from '@phosphor-icons/react'
@@ -17,11 +19,10 @@ import { SnippetManager } from '@/components/SnippetManager'
import type { AtomicLevel, Snippet } from '@/lib/types'
import { toast } from 'sonner'
type TabValue = AtomicLevel | 'snippets'
function App() {
const [activeTab, setActiveTab] = useState<TabValue>('atoms')
const [activeTab, setActiveTab] = useState<AtomicLevel>('atoms')
const [snippets, setSnippets] = useKV<Snippet[]>('snippets', [])
const [menuOpen, setMenuOpen] = useState(false)
const handleSaveSnippet = useCallback((snippetData: Omit<Snippet, 'id' | 'createdAt' | 'updatedAt'>) => {
const newSnippet: Snippet = {
@@ -37,168 +38,142 @@ function App() {
return (
<div className="min-h-screen bg-background">
<div
className="fixed inset-0 opacity-10 pointer-events-none"
className="fixed inset-0 opacity-[0.03] pointer-events-none"
style={{
backgroundImage: `
repeating-linear-gradient(
45deg,
0deg,
transparent,
transparent 60px,
oklch(0.30 0.12 310) 60px,
oklch(0.30 0.12 310) 61px
transparent 40px,
oklch(0.75 0.18 200) 40px,
oklch(0.75 0.18 200) 41px
),
repeating-linear-gradient(
-45deg,
90deg,
transparent,
transparent 60px,
oklch(0.30 0.12 310) 60px,
oklch(0.30 0.12 310) 61px
transparent 40px,
oklch(0.75 0.18 200) 40px,
oklch(0.75 0.18 200) 41px
)
`,
}}
/>
<div className="relative z-10">
<header className="border-b border-border bg-background/80 backdrop-blur-sm sticky top-0 z-20">
<div className="container mx-auto px-8 py-8">
<motion.div
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
className="space-y-2"
>
<div className="flex items-center gap-3 mb-4">
<div className="h-12 w-12 rounded-xl bg-gradient-to-br from-primary to-accent flex items-center justify-center">
<Palette className="h-6 w-6 text-primary-foreground" weight="bold" />
<header className="border-b border-border bg-background/90 backdrop-blur-md sticky top-0 z-20">
<div className="container mx-auto px-6 py-6">
<div className="flex items-center justify-between">
<motion.div
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.4 }}
className="flex items-center gap-3"
>
<div className="h-10 w-10 rounded-lg bg-gradient-to-br from-primary to-accent flex items-center justify-center">
<Code className="h-5 w-5 text-primary-foreground" weight="bold" />
</div>
<div>
<h1 className="text-5xl font-bold bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent">
Atomic Component Library
</h1>
</div>
</div>
<p className="text-lg text-muted-foreground">
A comprehensive design system organized by atomic design principles - from fundamental atoms to complete templates
</p>
</motion.div>
<h1 className="text-2xl font-bold font-mono bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent">
CodeSnippet
</h1>
</motion.div>
<Sheet open={menuOpen} onOpenChange={setMenuOpen}>
<SheetTrigger asChild>
<Button variant="ghost" size="icon" className="h-10 w-10">
<List className="h-6 w-6" weight="bold" />
</Button>
</SheetTrigger>
<SheetContent side="left" className="w-full sm:max-w-2xl overflow-y-auto">
<SheetHeader>
<SheetTitle className="text-2xl">Component Library</SheetTitle>
</SheetHeader>
<div className="mt-6">
<Tabs
value={activeTab}
onValueChange={(value) => setActiveTab(value as AtomicLevel)}
className="space-y-6"
>
<TabsList className="grid w-full grid-cols-4 h-12">
<TabsTrigger value="atoms" className="gap-2">
<Atom weight="bold" className="h-4 w-4" />
<span className="hidden sm:inline">Atoms</span>
</TabsTrigger>
<TabsTrigger value="molecules" className="gap-2">
<FlowArrow weight="bold" className="h-4 w-4" />
<span className="hidden sm:inline">Molecules</span>
</TabsTrigger>
<TabsTrigger value="organisms" className="gap-2">
<FlowArrow weight="bold" className="h-4 w-4 rotate-90" />
<span className="hidden sm:inline">Organisms</span>
</TabsTrigger>
<TabsTrigger value="templates" className="gap-2">
<Layout weight="bold" className="h-4 w-4" />
<span className="hidden sm:inline">Templates</span>
</TabsTrigger>
</TabsList>
<TabsContent value="atoms" className="space-y-4">
<div>
<h3 className="text-xl font-bold mb-2">Atoms</h3>
<p className="text-sm text-muted-foreground">
Fundamental building blocks - basic HTML elements styled as reusable components
</p>
</div>
<AtomsSection onSaveSnippet={handleSaveSnippet} />
</TabsContent>
<TabsContent value="molecules" className="space-y-4">
<div>
<h3 className="text-xl font-bold mb-2">Molecules</h3>
<p className="text-sm text-muted-foreground">
Simple groups of atoms functioning together as a unit
</p>
</div>
<MoleculesSection onSaveSnippet={handleSaveSnippet} />
</TabsContent>
<TabsContent value="organisms" className="space-y-4">
<div>
<h3 className="text-xl font-bold mb-2">Organisms</h3>
<p className="text-sm text-muted-foreground">
Complex UI components composed of molecules and atoms
</p>
</div>
<OrganismsSection onSaveSnippet={handleSaveSnippet} />
</TabsContent>
<TabsContent value="templates" className="space-y-4">
<div>
<h3 className="text-xl font-bold mb-2">Templates</h3>
<p className="text-sm text-muted-foreground">
Page-level layouts that combine organisms into complete interfaces
</p>
</div>
<TemplatesSection onSaveSnippet={handleSaveSnippet} />
</TabsContent>
</Tabs>
</div>
</SheetContent>
</Sheet>
</div>
</div>
</header>
<main className="container mx-auto px-8 py-12">
<Tabs
value={activeTab}
onValueChange={(value) => setActiveTab(value as TabValue)}
className="space-y-8"
<main className="container mx-auto px-6 py-8">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4, delay: 0.1 }}
>
<TabsList className="grid w-full max-w-3xl mx-auto grid-cols-5 h-14">
<TabsTrigger value="atoms" className="gap-2 text-base">
<Atom weight="bold" />
<span className="hidden sm:inline">Atoms</span>
</TabsTrigger>
<TabsTrigger value="molecules" className="gap-2 text-base">
<FlowArrow weight="bold" />
<span className="hidden sm:inline">Molecules</span>
</TabsTrigger>
<TabsTrigger value="organisms" className="gap-2 text-base">
<FlowArrow weight="bold" className="rotate-90" />
<span className="hidden sm:inline">Organisms</span>
</TabsTrigger>
<TabsTrigger value="templates" className="gap-2 text-base">
<Layout weight="bold" />
<span className="hidden sm:inline">Templates</span>
</TabsTrigger>
<TabsTrigger value="snippets" className="gap-2 text-base">
<Code weight="bold" />
<span className="hidden sm:inline">Snippets</span>
</TabsTrigger>
</TabsList>
<motion.div
key={activeTab}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
>
<TabsContent value="atoms" className="mt-8">
<div className="mb-8">
<h2 className="text-4xl font-bold mb-3">Atoms</h2>
<p className="text-lg text-muted-foreground">
The fundamental building blocks - basic HTML elements styled as reusable components
</p>
</div>
<AtomsSection onSaveSnippet={handleSaveSnippet} />
</TabsContent>
<TabsContent value="molecules" className="mt-8">
<div className="mb-8">
<h2 className="text-4xl font-bold mb-3">Molecules</h2>
<p className="text-lg text-muted-foreground">
Simple groups of atoms functioning together as a unit - form fields, search bars, and cards
</p>
</div>
<MoleculesSection onSaveSnippet={handleSaveSnippet} />
</TabsContent>
<TabsContent value="organisms" className="mt-8">
<div className="mb-8">
<h2 className="text-4xl font-bold mb-3">Organisms</h2>
<p className="text-lg text-muted-foreground">
Complex UI components composed of molecules and atoms - headers, forms, and data displays
</p>
</div>
<OrganismsSection onSaveSnippet={handleSaveSnippet} />
</TabsContent>
<TabsContent value="templates" className="mt-8">
<div className="mb-8">
<h2 className="text-4xl font-bold mb-3">Templates</h2>
<p className="text-lg text-muted-foreground">
Page-level layouts that combine organisms into complete user interfaces
</p>
</div>
<TemplatesSection onSaveSnippet={handleSaveSnippet} />
</TabsContent>
<TabsContent value="snippets" className="mt-8">
<div className="mb-8">
<h2 className="text-4xl font-bold mb-3">Code Snippets</h2>
<p className="text-lg text-muted-foreground">
Save and manage reusable code snippets with live preview
</p>
</div>
<SnippetManager />
</TabsContent>
</motion.div>
</Tabs>
<SnippetManager />
</motion.div>
</main>
<footer className="border-t border-border mt-24">
<div className="container mx-auto px-8 py-12">
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div>
<h3 className="font-bold text-lg mb-3">Atomic Design</h3>
<p className="text-sm text-muted-foreground">
A methodology for creating design systems by breaking interfaces down into their basic components.
</p>
</div>
<div>
<h3 className="font-bold text-lg mb-3">Component Levels</h3>
<ul className="text-sm text-muted-foreground space-y-2">
<li>• Atoms: Basic building blocks</li>
<li>• Molecules: Simple combinations</li>
<li>• Organisms: Complex components</li>
<li>• Templates: Complete layouts</li>
</ul>
</div>
<div>
<h3 className="font-bold text-lg mb-3">Built With</h3>
<ul className="text-sm text-muted-foreground space-y-2">
<li>• React + TypeScript</li>
<li>• Tailwind CSS</li>
<li>• Shadcn/ui Components</li>
<li>• Framer Motion</li>
</ul>
</div>
<div className="container mx-auto px-6 py-8">
<div className="text-center text-sm text-muted-foreground">
<p>CodeSnippet - Share, organize, and discover code snippets with syntax highlighting</p>
</div>
</div>
</footer>

36
src/index.css
View File

@@ -8,29 +8,29 @@
}
:root {
--background: oklch(0.12 0.02 310);
--foreground: oklch(0.94 0.02 310);
--background: oklch(0.10 0.01 280);
--foreground: oklch(0.96 0.01 280);
--card: oklch(0.20 0.12 310);
--card-foreground: oklch(0.94 0.02 310);
--popover: oklch(0.20 0.12 310);
--popover-foreground: oklch(0.94 0.02 310);
--card: oklch(0.18 0.02 280);
--card-foreground: oklch(0.96 0.01 280);
--popover: oklch(0.18 0.02 280);
--popover-foreground: oklch(0.96 0.01 280);
--primary: oklch(0.50 0.18 310);
--primary: oklch(0.55 0.20 280);
--primary-foreground: oklch(0.98 0 0);
--secondary: oklch(0.30 0.08 310);
--secondary-foreground: oklch(0.94 0.02 310);
--muted: oklch(0.25 0.06 310);
--muted-foreground: oklch(0.60 0.04 310);
--accent: oklch(0.72 0.20 25);
--accent-foreground: oklch(0.20 0.12 310);
--secondary: oklch(0.28 0.04 280);
--secondary-foreground: oklch(0.96 0.01 280);
--muted: oklch(0.22 0.02 280);
--muted-foreground: oklch(0.60 0.03 280);
--accent: oklch(0.75 0.18 200);
--accent-foreground: oklch(0.18 0.02 280);
--destructive: oklch(0.577 0.245 27.325);
--destructive-foreground: oklch(0.98 0 0);
--border: oklch(0.30 0.08 310);
--input: oklch(0.30 0.08 310);
--ring: oklch(0.72 0.20 25);
--border: oklch(0.28 0.04 280);
--input: oklch(0.28 0.04 280);
--ring: oklch(0.75 0.18 200);
--radius: 0.75rem;
--radius: 0.5rem;
}
@theme {
@@ -63,7 +63,7 @@
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Bricolage Grotesque', sans-serif;
font-family: 'Inter', sans-serif;
}
body {