UI Components

Component Library

WI-CARPOOL uses a combination of custom components and Shadcn/ui components built on top of Radix UI primitives.

🎨 Design System

Consistent design tokens and styling across all components using Tailwind CSS.

♿ Accessibility

All components follow WCAG guidelines with proper ARIA attributes and keyboard navigation.

📱 Responsive

Mobile-first design approach with responsive breakpoints for all screen sizes.

🔧 Customizable

Easily customizable components with variant props and CSS custom properties.

Core Components

Button Component

Versatile button component with multiple variants and sizes.

Usage Example

import { Button } from "@/components/ui/button"

function MyComponent() {
  return (
    <div className="space-x-2">
      <Button variant="default">Default</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
    </div>
  )
}

Card Component

Container component for organizing content with proper spacing and elevation.

Card Implementation

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

function RideCard({ ride }) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>{ride.destination}</CardTitle>
      </CardHeader>
      <CardContent>
        <p>{ride.description}</p>
      </CardContent>
    </Card>
  )
}

Dialog Component

Modal dialog for displaying content overlays and confirmations.

Dialog Usage

import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"

function BookingDialog() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Book Ride</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Confirm Booking</DialogTitle>
        </DialogHeader>
        <!-- Booking form content -->
      </DialogContent>
    </Dialog>
  )
}

Navigation Components

Sidebar

Collapsible sidebar navigation with responsive behavior.

Sidebar Setup

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
} from "@/components/ui/sidebar"

export function AppSidebar() {
  return (
    <Sidebar>
      <SidebarContent>
        <SidebarGroup>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton asChild>
                <Link to="/dashboard">Dashboard</Link>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
  )
}

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu"

function MainNavigation() {
  return (
    <NavigationMenu>
      <NavigationMenuItem>
        <NavigationMenuTrigger>Services</NavigationMenuTrigger>
        <NavigationMenuContent>
          <!-- Dropdown content -->
        </NavigationMenuContent>
      </NavigationMenuItem>
    </NavigationMenu>
  )
}

Data Display Components

Table

Responsive data table with sorting and filtering capabilities.

Table Implementation

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"

function RidesTable({ rides }) {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Destination</TableHead>
          <TableHead>Date</TableHead>
          <TableHead>Price</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {rides.map((ride) => (
          <TableRow key={ride.id}>
            <TableCell>{ride.destination}</TableCell>
            <TableCell>{ride.date}</TableCell>
            <TableCell>{ride.price}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}

Badge

Small status indicators and labels.

Badge Variants

import { Badge } from "@/components/ui/badge"

function StatusBadges() {
  return (
    <div className="space-x-2">
      <Badge variant="default">Active</Badge>
      <Badge variant="secondary">Pending</Badge>
      <Badge variant="destructive">Cancelled</Badge>
      <Badge variant="outline">Draft</Badge>
    </div>
  )
}

Custom Components

RideCard

Specialized card component for displaying ride information.

RideCard Usage

import { RideCard } from "@/components/RideCard"

function RidesList({ rides }) {
  return (
    <div className="space-y-4">
      {rides.map((ride) => (
        <RideCard
          key={ride.id}
          ride={ride}
          onBook={handleBooking}
        />
      ))}
    </div>
  )
}

SearchForm

Specialized form component for ride search functionality.

SearchForm Implementation

import { SearchForm } from "@/components/SearchForm"

function HomePage() {
  const handleSearch = (searchData) => {
    // Handle search logic
  }

  return (
    <SearchForm
      onSearch={handleSearch}
      initialValues={{
        from: '',
        to: '',
        date: new Date()
      }}
    />
  )
}

Component Guidelines

Naming Conventions

Use PascalCase for component names
Use descriptive names that indicate functionality
Prefix custom components with descriptive domain terms
Use consistent naming for props and handlers

Performance Best Practices

Use React.memo for components that receive stable props
Implement proper key props for lists
Avoid creating objects and functions in render
Use useCallback and useMemo appropriately

Accessibility Guidelines

Include proper ARIA labels and descriptions
Ensure keyboard navigation works correctly
Maintain proper focus management
Use semantic HTML elements