Components

Live, interactive inventory of every UI component. Each component is rendered with the exact same code used on our main website, ensuring perfect consistency.

Component Index

Audio Player

Media playback with controls

Buttons

Interactive buttons and actions

Cards

Content containers

Forms & Inputs

Form elements and inputs

Navigation

Navigation components

Status & Feedback

Alerts and status indicators

Layout Components

Structural layout elements

Audio Player

Interactive audio player with playback controls and progress tracking.

Audio Player Component

Full-featured audio player used throughout the MTWS website for Islamic content playback.

A Glimpse into the Religion of Islam

Masjid Tawheed Was-Sunnah

0:000:00

React/TypeScript

import AudioPlayer from '@/components/ui/AudioPlayer';

<AudioPlayer
  src="/assets/general/A-Glimpse-into-the-Religion-of-Islam-Audiobook1.mp3"
  title="A Glimpse into the Religion of Islam"
  artist="Masjid Tawheed Was-Sunnah"
  cover="/assets/general/eng-islam-audiobook.jpg"
/>

Buttons

Interactive buttons with various styles and states for different use cases.

Button Variants

Different button styles for various contexts and emphasis levels.

React/TypeScript

import { Button } from '@/components/ui/Button';

// Primary button (default)
<Button>Primary Button</Button>

// Secondary button with outline
<Button variant="outline">Secondary Button</Button>

// Destructive button for dangerous actions
<Button variant="destructive">Delete</Button>

// Ghost button for subtle actions
<Button variant="ghost">Ghost Button</Button>

// Link style button
<Button variant="link">Link Button</Button>

Button Sizes

Different button sizes for various layout contexts.

React/TypeScript

import { Button } from '@/components/ui/Button';

// Small button
<Button size="sm">Small</Button>

// Default button
<Button>Default</Button>

// Large button
<Button size="lg">Large</Button>

// Icon button
<Button size="icon">
  <Icon />
</Button>

Button States

Visual representation of different button states.

React/TypeScript

import { Button } from '@/components/ui/Button';

// Normal state
<Button>Normal</Button>

// Disabled state
<Button disabled>Disabled</Button>

// Loading state (custom implementation)
<Button disabled>
  <Spinner className="mr-2" />
  Loading...
</Button>

Cards

Flexible content containers with consistent styling and spacing.

Basic Card

Standard card layout with header, content, and footer.

Card Title

Card description or subtitle goes here

This is the main content area of the card.

React/TypeScript

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/Card';
import { Button } from '@/components/ui/Button';

<Card className="w-full max-w-md">
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>
      Card description or subtitle goes here
    </CardDescription>
  </CardHeader>
  <CardContent>
    <p>This is the main content area of the card.</p>
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

Seminar Card Example

Card styled for displaying seminar information.

Understanding Tawheed

Shaykh Rasheed Barbee

📅 December 15, 2024

🕐 7:00 PM - 9:00 PM

📍 MTWS 3714 S. Alston Ave. Durham NC 27713

React/TypeScript

<Card className="w-full max-w-sm">
  <CardHeader>
    <CardTitle>Understanding Tawheed</CardTitle>
    <CardDescription>
      Shaykh Rasheed Barbee
    </CardDescription>
  </CardHeader>
  <CardContent>
    <div className="space-y-2 text-sm text-gray-600">
      <div>📅 December 15, 2024</div>
      <div>🕐 7:00 PM - 9:00 PM</div>
      <div>📍 MTWS 3714 S. Alston Ave. Durham NC 27713</div>
    </div>
  </CardContent>
  <CardFooter>
    <Button size="sm">Register</Button>
  </CardFooter>
</Card>

Forms & Inputs

Form elements with consistent styling and validation states.

Text Input

Standard text input with label and placeholder.

Email Address

React/TypeScript

import { Input } from '@/components/ui/Input';

<div className="space-y-2">
  <label htmlFor="email" className="text-sm font-medium">
    Email Address
  </label>
  <Input
    id="email"
    type="email"
    placeholder="your.email@example.com"
  />
</div>

Contact Form

Example contact form with multiple input types.

React/TypeScript

import { Input } from '@/components/ui/Input';
import { Button } from '@/components/ui/Button';

<form className="space-y-4">
  <div>
    <label className="text-sm font-medium">Name</label>
    <Input placeholder="Your full name" />
  </div>
  <div>
    <label className="text-sm font-medium">Email</label>
    <Input type="email" placeholder="your.email@example.com" />
  </div>
  <div>
    <label className="text-sm font-medium">Message</label>
    <textarea 
      className="w-full p-3 border rounded-md"
      rows={4}
      placeholder="Your message..."
    />
  </div>
  <Button type="submit">Send Message</Button>
</form>

Navigation

Navigation components for different contexts and layouts.

Breadcrumbs

Hierarchical navigation showing user's location.

React/TypeScript

import Link from 'next/link';

<nav className="flex" aria-label="Breadcrumb">
  <ol className="flex items-center space-x-2">
    <li>
      <Link href="/" className="text-gray-500 hover:text-gray-700">
        Home
      </Link>
    </li>
    <li className="text-gray-400">/</li>
    <li>
      <Link href="/seminars" className="text-gray-500 hover:text-gray-700">
        Seminars
      </Link>
    </li>
    <li className="text-gray-400">/</li>
    <li className="text-gray-900 font-medium">
      Understanding Tawheed
    </li>
  </ol>
</nav>

Main Navigation

Primary site navigation with active states.

React/TypeScript

import Link from 'next/link';
import { usePathname } from 'next/navigation';

const navItems = [
  { name: 'About', href: '/about' },
  { name: 'Seminars', href: '/seminars' },
  { name: 'Contact', href: '/contact' },
  { name: 'Donate', href: '/donate' },
];

<nav className="flex space-x-8">
  {navItems.map((item) => (
    <Link
      key={item.name}
      href={item.href}
      className={cn(
        'text-sm font-medium transition-colors hover:text-primary-green',
        pathname === item.href 
          ? 'text-primary-green' 
          : 'text-gray-700'
      )}
    >
      {item.name}
    </Link>
  ))}
</nav>

Status & Feedback

Components for displaying status, alerts, and user feedback.

Status Badges

Color-coded badges for displaying item status.

UpcomingCompletedCancelledLive

React/TypeScript

// Status badge variants
<span className="bg-primary-green text-white text-xs px-2 py-1 rounded-full">
  Upcoming
</span>

<span className="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">
  Completed
</span>

<span className="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">
  Cancelled
</span>

<span className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
  Live
</span>

Alert Messages

Informational alerts for user feedback.

Success! Your message has been sent.

Error: Please check your input and try again.

React/TypeScript

// Success alert
<div className="bg-green-50 border border-green-200 rounded-lg p-4">
  <div className="flex">
    <CheckIcon className="h-5 w-5 text-green-400" />
    <div className="ml-3">
      <p className="text-sm font-medium text-green-800">
        Success! Your message has been sent.
      </p>
    </div>
  </div>
</div>

// Error alert
<div className="bg-red-50 border border-red-200 rounded-lg p-4">
  <div className="flex">
    <XIcon className="h-5 w-5 text-red-400" />
    <div className="ml-3">
      <p className="text-sm font-medium text-red-800">
        Error: Please check your input and try again.
      </p>
    </div>
  </div>
</div>

Layout Components

Structural components for page layout and content organization.

Page Header

Standard page header with title and description.

Page Title

Page description or subtitle that provides context about the content.

React/TypeScript

<div className="mb-12">
  <h1 className="text-4xl font-bold text-deep-forest-green mb-4">
    Page Title
  </h1>
  <p className="text-lg text-gray-700">
    Page description or subtitle that provides context about the content.
  </p>
</div>

Section with Divider

Content section with visual separation.

Section Title

Section description explaining the content below.

Section content goes here...

React/TypeScript

<section className="mb-16">
  <div className="mb-8">
    <h2 className="text-3xl font-bold text-gray-900 mb-2">
      Section Title
    </h2>
    <p className="text-lg text-gray-600">
      Section description explaining the content below.
    </p>
  </div>
  
  <div className="border-t border-gray-200 pt-8">
    {/* Section content goes here */}
  </div>
</section>