Reusable UI Components¶

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

import { Button } from '@/components/ui';
import { PlusIcon } from '@heroicons/react/24/outline';

// Primary button with icon
<Button variant="primary" icon={<PlusIcon className="w-5 h-5" />}>
  Create New
</Button>

// Loading state
<Button variant="secondary" loading>
  Saving...
</Button>

// Danger button with full width
<Button variant="danger" fullWidth onClick={handleDelete}>
  Delete
</Button>

// Ghost button (minimal style)
<Button variant="ghost" size="sm">
  Cancel
</Button>

import { Input } from '@/components/ui';
import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';

// Search input with icon
<Input
  label="Search"
  placeholder="Search collections..."
  icon={<MagnifyingGlassIcon className="w-5 h-5 text-gray-60" />}
  fullWidth
/>

// Input with validation error
<Input
  label="Email"
  type="email"
  error="Invalid email address"
  fullWidth
/>

// Input with help text
<Input
  label="Username"
  helpText="Choose a unique username"
  fullWidth
/>

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

<TextArea
  label="Description"
  placeholder="Enter description..."
  rows={4}
  fullWidth
/>

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

const options = [
  { value: 'public', label: 'Public' },
  { value: 'private', label: 'Private' },
];

<Select
  label="Visibility"
  options={options}
  placeholder="Select visibility..."
  fullWidth
/>

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

<Modal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  title="Create Collection"
  subtitle="Enter collection details"
  footer={
    <>
      <Button variant="secondary" onClick={() => setIsOpen(false)}>
        Cancel
      </Button>
      <Button variant="primary" onClick={handleSubmit}>
        Create
      </Button>
    </>
  }
>
  {/* Modal content */}
  <Input label="Name" fullWidth />
</Modal>

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

// Card with content
<Card padding="lg" hoverable>
  <h3>Collection Name</h3>
  <p>Description...</p>
</Card>

// Clickable card with no padding
<Card padding="none" onClick={handleClick}>
  <img src="..." alt="Preview" />
  <div className="p-4">Content</div>
</Card>

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

<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="error">Failed</Badge>
<Badge variant="info" size="sm">New</Badge>

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

<FileUpload
  label="Upload Documents"
  onFilesChange={(files) => setFiles(files)}
  accept=".pdf,.docx"
  multiple
  maxSize={100}
/>

// ✅ Good
<Button variant="primary">Save</Button>
<Button variant="secondary">Cancel</Button>
<Button variant="danger">Delete</Button>

// ❌ Avoid
<Button variant="primary">Cancel</Button>
<Button variant="secondary">Delete</Button>

// ✅ Good
<Input label="Email" type="email" />

// ❌ Avoid
<Input type="email" placeholder="Email" />

// ✅ Good
<Button loading={isSubmitting}>Submit</Button>

// ❌ Avoid
<Button disabled={isSubmitting}>
  {isSubmitting ? 'Loading...' : 'Submit'}
</Button>

// ✅ Good
<Input
  label="Email"
  value={email}
  error={emailError}
  onChange={handleEmailChange}
/>

// ❌ Avoid
<>
  <Input label="Email" value={email} />
  {emailError && <span className="text-red-500">{emailError}</span>}
</>

// ✅ Good - Using reusable components
import { Button, Input, Modal } from '@/components/ui';

// ❌ Avoid - Mixing custom and reusable
import { Button } from '@/components/ui';
<button className="custom-btn">Click</button> // Don't mix

<button className="btn-primary">Click me</button>
<button className="btn-secondary">Cancel</button>

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

<Button variant="primary">Click me</Button>
<Button variant="secondary">Cancel</Button>

<input
  type="text"
  className="input-field w-full"
  placeholder="Enter name"
/>

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

<Input
  label="Name"
  placeholder="Enter name"
  fullWidth
/>

<div className="modal-overlay">
  <div className="modal-content">
    <h2>Title</h2>
    {/* content */}
  </div>
</div>

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

<Modal
  isOpen={isOpen}
  onClose={onClose}
  title="Title"
>
  {/* content */}
</Modal>

import type { ButtonProps, ButtonVariant } from '@/components/ui';

// Props are typed
const MyButton: React.FC<{ variant: ButtonVariant }> = ({ variant }) => {
  return <Button variant={variant}>Click</Button>;
};

// Exported types
type UploadedFile = {
  id: string;
  name: string;
  size: number;
  type: string;
  status: 'pending' | 'uploading' | 'complete' | 'error';
  progress: number;
  file: File;
};