Tabs

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@peppermint-design/devreadykit-custom';

export default function App() {
  return (
    <Tabs defaultValue="tab1">
      <TabsList>
        <TabsTrigger value="tab1">Tab 1</TabsTrigger>
        <TabsTrigger value="tab2">Tab 2</TabsTrigger>
        <TabsTrigger value="tab3">Tab 3</TabsTrigger>
      </TabsList>
      
      <TabsContent value="tab1">
        <p>Content for tab 1</p>
      </TabsContent>
      
      <TabsContent value="tab2">
        <p>Content for tab 2</p>
      </TabsContent>
      
      <TabsContent value="tab3">
        <p>Content for tab 3</p>
      </TabsContent>
    </Tabs>
  );
}

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@peppermint-design/devreadykit-custom';
import { User } from '@/assets/icons/user';
import { Edit } from '@/assets/icons/edit';
import { Users } from "@/assets/icons/users.tsx";

export default function TabsWithIcons() {
  return (
    <Tabs defaultValue="profile">
      <TabsList>
        <TabsTrigger value="profile">
          <span className="flex items-center gap-2">
            <User className="h-4 w-4" />
            Profile
          </span>
        </TabsTrigger>
        <TabsTrigger value="settings">
          <span className="flex items-center gap-2">
            <Edit className="h-4 w-4 text-neutral-40" />
            Settings
          </span>
        </TabsTrigger>
        <TabsTrigger value="help">
          <span className="flex items-center gap-2">
            <Users className="h-4 w-4 text-neutral-40" />
            Help
          </span>
        </TabsTrigger>
      </TabsList>
      
      <TabsContent value="profile">
        <div className="p-4">Profile content</div>
      </TabsContent>
      
      <TabsContent value="settings">
        <div className="p-4">Settings content</div>
      </TabsContent>
      
      <TabsContent value="help">
        <div className="p-4">Help content</div>
      </TabsContent>
    </Tabs>
  );
}

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@peppermint-design/devreadykit-custom';

export default function VerticalTabs() {
  return (
    <Tabs defaultValue="overview" orientation="vertical">
      <div className="flex gap-4">
        <TabsList className="flex-col">
          <TabsTrigger value="overview">Overview</TabsTrigger>
          <TabsTrigger value="details">Details</TabsTrigger>
          <TabsTrigger value="history">History</TabsTrigger>
        </TabsList>
        
        <div className="flex-1">
          <TabsContent value="overview">
            <div className="p-4">Overview content</div>
          </TabsContent>
          
          <TabsContent value="details">
            <div className="p-4">Details content</div>
          </TabsContent>
          
          <TabsContent value="history">
            <div className="p-4">History content</div>
          </TabsContent>
        </div>
      </div>
    </Tabs>
  );
}

import { useState } from "react";
import { Tabs, TabsList, TabsTrigger, TabsContent, Toggle } from '@peppermint-design/devreadykit-custom';

export default function UserProfileTabs() {
  const user = {
    name: "Jane Doe",
    email: "jane.doe@example.com",
    activity: [
      { id: 1, description: "Signed in from Chrome on macOS" },
      { id: 2, description: "Updated profile information" },
      { id: 3, description: "Enabled two-factor authentication" },
    ],
  };
  const [emailNotifications, setEmailNotifications] = useState(true);
  const [darkMode, setDarkMode] = useState(false);

  return (
    <Tabs defaultValue="profile">
      <TabsList>
        <TabsTrigger value="profile">Profile</TabsTrigger>
        <TabsTrigger value="activity">Activity</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
      
      <TabsContent value="profile">
        <div className="p-6 space-y-4">
          <h3 className="text-lg font-semibold">Profile Information</h3>
          <div>
            <label className="block text-sm font-medium">Name</label>
            <p>{user.name}</p>
          </div>
          <div>
            <label className="block text-sm font-medium">Email</label>
            <p>{user.email}</p>
          </div>
        </div>
      </TabsContent>
      
      <TabsContent value="activity">
        <div className="p-6">
          <h3 className="text-lg font-semibold mb-4">Recent Activity</h3>
          <div className="space-y-2">
            {user.activity.map(activity => (
              <div key={activity.id} className="p-2 border rounded">
                {activity.description}
              </div>
            ))}
          </div>
        </div>
      </TabsContent>
      
      <TabsContent value="settings">
        <div className="p-6">
          <h3 className="text-lg font-semibold mb-4">Account Settings</h3>
          <div className="space-y-4">
            <Toggle
              label="Email notifications"
              checked={emailNotifications}
              onChange={setEmailNotifications}
            />
            <Toggle
              label="Dark mode"
              checked={darkMode}
              onChange={setDarkMode}
            />
          </div>
        </div>
      </TabsContent>
    </Tabs>
  );
}