Skip to content

Component Templates ‐ Initial Structure Guide

Jump to bottom
Divyansh Bhardwaj edited this page Oct 8, 2025 · 1 revision

This document provides the basic HTML structure and element breakdown for each component in the Class Notes App. Use this as a reference when implementing components.

📦 UI Components

1. Button Component

File: src/components/ui/Button/Button.tsx

HTML Elements:

  • <button> - Main button element
    • Attributes: type, disabled, onClick, className
    • DaisyUI classes: btn, btn-primary, btn-secondary, btn-ghost, btn-sm, btn-md, btn-lg

Props:

  • children: ReactNode
  • variant: 'primary' | 'secondary' | 'ghost'
  • size: 'sm' | 'md' | 'lg'
  • disabled: boolean
  • onClick: () => void
  • type: 'button' | 'submit' | 'reset'

2. Input Component

File: src/components/ui/Input/Input.tsx

HTML Elements:

  • <div> - Wrapper container
    • <label> - Label for the input (if provided)
    • <input> - Main input element
      • Attributes: type, value, onChange, placeholder, disabled, required
      • DaisyUI classes: input, input-bordered, input-error
    • <span> - Error message display (conditional)
      • Classes: text-error, text-sm

Props:

  • label: string
  • type: 'text' | 'email' | 'password' | 'number'
  • value: string | number
  • onChange: (e: ChangeEvent) => void
  • placeholder: string
  • error: string
  • disabled: boolean
  • required: boolean

3. Card Component

File: src/components/ui/Card/Card.tsx

HTML Elements:

  • <div> - Main card container
    • DaisyUI classes: card, card-bordered, bg-base-100, shadow-xl
    • <div> - Card body
      • Classes: card-body
      • {children} - Card content

Props:

  • children: ReactNode
  • className: string
  • onClick: () => void
  • bordered: boolean
  • shadow: boolean

4. Badge Component

File: src/components/ui/Badge/Badge.tsx

HTML Elements:

  • <div> - Badge container
    • DaisyUI classes: badge, badge-primary, badge-secondary
    • <span> - Badge text
    • <button> - Remove button (optional)
      • Classes: btn, btn-ghost, btn-xs
      • Contains: × or close icon

Props:

  • text: string
  • color: string
  • variant: 'primary' | 'secondary' | 'accent' | 'ghost'
  • removable: boolean
  • onRemove: () => void

5. Modal Component

File: src/components/ui/Modal/Modal.tsx

HTML Elements:

  • <dialog> - Native dialog element (DaisyUI modal)
    • Classes: modal
    • <div> - Modal box
      • Classes: modal-box
      • <h3> - Modal title
      • <div> - Modal content
      • <div> - Modal actions
        • Classes: modal-action
        • Contains: Action buttons

Props:

  • isOpen: boolean
  • onClose: () => void
  • title: string
  • children: ReactNode
  • actions: ReactNode

6. Dropdown Component

File: src/components/ui/Dropdown/Dropdown.tsx

HTML Elements:

  • <div> - Dropdown container
    • Classes: dropdown
    • <label> - Dropdown trigger
      • Classes: btn
    • <ul> - Dropdown menu
      • Classes: dropdown-content, menu, p-2, shadow, bg-base-100, rounded-box
      • <li> (multiple) - Menu items
        • <a> - Menu item link/button

Props:

  • trigger: ReactNode
  • items: Array<{ label: string; value: string; onClick: () => void }>
  • position: 'top' | 'bottom' | 'left' | 'right'

🎨 Layout Components

7. Header Component

File: src/components/layout/Header/Header.tsx

HTML Elements:

  • <header> - Main header element
    • Classes: navbar, bg-base-100, shadow-lg
    • <div> - Navbar start
      • Classes: navbar-start
      • <a> - Logo/brand
    • <div> - Navbar center (optional)
      • Classes: navbar-center
    • <div> - Navbar end
      • Classes: navbar-end
      • Contains: ThemeToggle, UserMenu

Props:

  • user: User | null
  • onLogout: () => void

Child Components:

  • Logo/Brand text
  • ThemeToggle
  • UserMenu (Dropdown)

8. Layout Component

File: src/components/layout/Layout/Layout.tsx

HTML Elements:

  • <div> - Main layout container
    • Classes: min-h-screen, bg-base-200
    • Header component
    • <main> - Main content area
      • Classes: container, mx-auto, p-4
      • <Outlet /> - React Router outlet

Props:

  • children: ReactNode (alternative to Outlet)

9. ThemeToggle Component

File: src/components/layout/ThemeToggle/ThemeToggle.tsx

HTML Elements:

  • <label> - Theme controller
    • Classes: swap, swap-rotate
    • <input> - Checkbox for theme toggle
      • Attributes: type="checkbox", className="theme-controller"
    • <svg> - Sun icon (light theme)
      • Classes: swap-on
    • <svg> - Moon icon (dark theme)
      • Classes: swap-off

Props:

  • None (uses ThemeContext)

👤 Authentication Components

10. LoginForm Component

File: src/components/features/auth/LoginForm/LoginForm.tsx

HTML Elements:

  • <div> - Form container
    • Classes: card, w-96, bg-base-100, shadow-xl
    • <div> - Card body
      • <h2> - Form title
      • <div> - Form fields container
        • Input component (email)
        • Input component (password)
      • <div> - Form actions
        • Button component (submit)
      • <div> - Error message display (conditional)

Props:

  • onLogin: (credentials: LoginCredentials) => void
  • onError: (error: string) => void
  • isLoading: boolean

📝 Note Components

11. NoteCard Component

File: src/components/features/notes/NoteCard/NoteCard.tsx

HTML Elements:

  • Card component wrapper
    • <div> - Card header
      • <h3> - Note title
      • <div> - Action buttons
        • Button (edit)
        • Button (delete)
    • <div> - Note preview
      • NotePreview component
    • <div> - Note metadata
      • <div> - Author info
        • <span> - Author name
      • <div> - Date info
        • <span> - Created/Updated date
    • <div> - Tags container
      • TagBadge components (multiple)

Props:

  • note: Note
  • onEdit: (noteId: string) => void
  • onDelete: (noteId: string) => void
  • onClick: (noteId: string) => void

12. NotePreview Component

File: src/components/features/notes/NotePreview/NotePreview.tsx

HTML Elements:

  • <div> - Preview container
    • Classes: line-clamp-3, text-base-content
    • <p> - Plain text content (stripped HTML)

Props:

  • content: string (HTML content)
  • maxLength: number

13. NotesList Component

File: src/components/features/notes/NotesList/NotesList.tsx

HTML Elements:

  • <div> - List container
    • Classes: grid, gap-4, grid-cols-1, md:grid-cols-2, lg:grid-cols-3
    • NoteCard components (multiple)
    • OR
    • <div> - Empty state (conditional)
      • Classes: text-center, py-12
      • <p> - Empty message
      • Button - Create first note

Props:

  • notes: Note[]
  • onEdit: (noteId: string) => void
  • onDelete: (noteId: string) => void
  • onNoteClick: (noteId: string) => void
  • isLoading: boolean

14. RichTextEditor Component

File: src/components/features/notes/RichTextEditor/RichTextEditor.tsx

HTML Elements:

  • <div> - Editor wrapper
    • Classes: border, rounded-lg, bg-base-100
    • <div> - Quill toolbar (ref)
      • Toolbar buttons (provided by Quill)
    • <div> - Quill editor container (ref)
      • Classes: min-h-[300px], p-4

Props:

  • value: string (HTML content)
  • onChange: (content: string) => void
  • placeholder: string
  • readOnly: boolean

Note: Uses Quill library with refs

🏷️ Tag Components

15. TagBadge Component

File: src/components/features/tags/TagBadge/TagBadge.tsx

HTML Elements:

  • Badge component wrapper
    • <span> - Tag name
    • <button> - Remove button (if removable)
      • Classes: btn, btn-ghost, btn-xs, ml-1
      • Contains: ×

Props:

  • tag: string | Tag
  • removable: boolean
  • onRemove: () => void
  • onClick: () => void
  • color: string

16. TagInput Component

File: src/components/features/tags/TagInput/TagInput.tsx

HTML Elements:

  • <div> - Input wrapper
    • <div> - Selected tags container
      • Classes: flex, flex-wrap, gap-2, mb-2
      • TagBadge components (for selected tags)
    • Input component - Tag input field
    • <div> - Suggestions dropdown (conditional)
      • Classes: absolute, bg-base-100, shadow-lg, rounded-box
      • <ul> - Suggestions list
        • <li> (multiple) - Suggestion items

Props:

  • tags: string[]
  • onChange: (tags: string[]) => void
  • suggestions: string[]
  • placeholder: string

17. TagSelector Component

File: src/components/features/tags/TagSelector/TagSelector.tsx

HTML Elements:

  • <div> - Selector container
    • Classes: card, bg-base-100, p-4
    • <h4> - Section title
    • TagInput component
    • <div> - All tags section
      • <p> - Section label
      • <div> - Tags grid
        • Classes: flex, flex-wrap, gap-2
        • TagBadge components (clickable)

Props:

  • selectedTags: string[]
  • onChange: (tags: string[]) => void
  • allTags: string[]

🔍 Search Components

18. SearchBar Component

File: src/components/features/search/SearchBar/SearchBar.tsx

HTML Elements:

  • <div> - Search container
    • Classes: relative
    • <div> - Input wrapper
      • Input component
      • <button> - Search icon (left)
      • <button> - Clear button (right, conditional)
        • Contains: ×

Props:

  • value: string
  • onChange: (value: string) => void
  • onClear: () => void
  • placeholder: string

19. FilterBar Component

File: src/components/features/search/FilterBar/FilterBar.tsx

HTML Elements:

  • <div> - Filter bar container
    • Classes: flex, flex-wrap, gap-4, items-center, p-4, bg-base-100
    • <div> - Tag filters section
      • <span> - Label
      • <div> - Selected tags
        • TagBadge components (removable)
      • Dropdown component - Tag selection
    • <div> - Sort section
      • <span> - Label
      • Dropdown component - Sort options

Props:

  • selectedTags: string[]
  • onTagSelect: (tags: string[]) => void
  • availableTags: string[]
  • sortBy: 'createdAt' | 'updatedAt' | 'title'
  • sortOrder: 'asc' | 'desc'
  • onSortChange: (sortBy: string, order: string) => void

📄 Page Components

20. LoginPage Component

File: src/pages/LoginPage/LoginPage.tsx

HTML Elements:

  • <div> - Page container
    • Classes: min-h-screen, flex, items-center, justify-center, bg-base-200
    • <div> - Content wrapper
      • <h1> - Page title
      • LoginForm component
      • <p> - Additional info/links (optional)

Props:

  • None (uses AuthContext and navigation)

21. DashboardPage Component

File: src/pages/DashboardPage/DashboardPage.tsx

HTML Elements:

  • <div> - Page container
    • <div> - Page header
      • <h1> - Page title
      • Button - Create new note
    • SearchBar component
    • FilterBar component
    • <div> - Notes section
      • NotesList component
    • <button> - Floating action button (mobile)
      • Classes: btn, btn-circle, btn-primary, fixed, bottom-8, right-8
      • Contains: + icon

Props:

  • None (uses hooks for data management)

22. NoteEditorPage Component

File: src/pages/NoteEditorPage/NoteEditorPage.tsx

HTML Elements:

  • <div> - Page container
    • <div> - Editor header
      • Button - Back button
      • Input component - Title input
      • Button - Save button
      • <span> - Save status indicator
    • <div> - Editor body
      • Classes: grid, gap-4, lg:grid-cols-3
      • <div> - Main editor area (lg:col-span-2)
        • RichTextEditor component
      • <div> - Sidebar (lg:col-span-1)
        • TagSelector component
        • <div> - Metadata section
          • <p> - Word count
          • <p> - Character count
          • <p> - Last saved time

Props:

  • None (uses route params and hooks)

23. NotFoundPage Component

File: src/pages/NotFoundPage/NotFoundPage.tsx

HTML Elements:

  • <div> - Page container
    • Classes: min-h-screen, flex, items-center, justify-center, bg-base-200
    • <div> - Content wrapper
      • Classes: text-center
      • <h1> - 404 heading
      • <p> - Error message
      • Button - Back to home

Props:

  • None

🔧 Route Components

24. ProtectedRoute Component

File: src/routes/ProtectedRoute.tsx

HTML Elements:

  • Conditional rendering:
    • If authenticated: <Outlet /> or {children}
    • If not authenticated: <Navigate to="/login" />

Props:

  • children: ReactNode (optional)
Clone this wiki locally