Interactive Examples

'use client';

import { StatGrid, StatCard, DataGrid, PageHeader } from '@sofondo/react';

export default function DashboardPage() {
  const columns = [
    { key: 'name', header: 'Name', sortable: true },
    { key: 'email', header: 'Email', sortable: true },
    { key: 'status', header: 'Status' }
  ];

  const users = [
    { id: 1, name: 'John Doe', email: 'john@example.com', status: 'Active' },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'Active' }
  ];

  return (
    <div>
      <PageHeader
        title="Dashboard"
        description="Welcome to your admin dashboard"
      />

      <StatGrid>
        <StatCard
          title="Total Users"
          value="1,234"
          trend="+12%"
          trendDirection="up"
        />
        <StatCard
          title="Revenue"
          value="$45,678"
          trend="+8%"
          trendDirection="up"
        />
        <StatCard
          title="Active Sessions"
          value="156"
          trend="-3%"
          trendDirection="down"
        />
      </StatGrid>

      <DataGrid columns={columns} data={users} keyField="id" />
    </div>
  );
}

'use client';

import { useState, useEffect } from 'react';
import { useDebounce } from '@sofondo/react';

export default function SearchPage() {
  const [searchTerm, setSearchTerm] = useState('');
  const [results, setResults] = useState([]);
  const [loading, setLoading] = useState(false);
  const debouncedSearchTerm = useDebounce(searchTerm, 500);

  useEffect(() => {
    if (debouncedSearchTerm) {
      setLoading(true);
      fetch(`/api/search?q=${debouncedSearchTerm}`)
        .then(res => res.json())
        .then(data => {
          setResults(data);
          setLoading(false);
        });
    } else {
      setResults([]);
    }
  }, [debouncedSearchTerm]);

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Search..."
      />
      {loading && <p>Searching...</p>}
      <ul>
        {results.map((result) => (
          <li key={result.id}>{result.name}</li>
        ))}
      </ul>
    </div>
  );
}

'use client';

import { useToast } from '@sofondo/react';

export default function MyComponent() {
  const { addToast } = useToast();

  const handleSuccess = () => {
    addToast('Operation completed successfully!', 'success');
  };

  const handleError = () => {
    addToast('Something went wrong!', 'error');
  };

  const handleInfo = () => {
    addToast('Here is some information', 'info');
  };

  return (
    <div>
      <button onClick={handleSuccess}>Success Toast</button>
      <button onClick={handleError}>Error Toast</button>
      <button onClick={handleInfo}>Info Toast</button>
    </div>
  );
}

'use client';

import { useLocalStorage, useTheme } from '@sofondo/react';

export default function SettingsPage() {
  const [fontSize, setFontSize] = useLocalStorage('fontSize', 16);
  const [notifications, setNotifications] = useLocalStorage('notifications', true);
  const { theme, setTheme } = useTheme();

  return (
    <div>
      <h1>Settings</h1>

      <div>
        <h2>Theme</h2>
        <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
          Current: {theme} - Switch Theme
        </button>
      </div>

      <div>
        <h2>Font Size: {fontSize}px</h2>
        <button onClick={() => setFontSize(fontSize - 2)}>Decrease</button>
        <button onClick={() => setFontSize(fontSize + 2)}>Increase</button>
      </div>

      <div>
        <h2>Notifications</h2>
        <label>
          <input
            type="checkbox"
            checked={notifications}
            onChange={(e) => setNotifications(e.target.checked)}
          />
          Enable notifications
        </label>
      </div>
    </div>
  );
}