Design System

<ContentLayout
  title="Content Layout Example"
  description="This is a basic content layout with title, description, content, and footer."
  footer={<Button>Action Button</Button>}
>
  <div className="p-4 border border-dashed rounded-md">
    <p>This is the main content area.</p>
    <p className="mt-2">You can put any content here.</p>
  </div>
</ContentLayout>

<FormLayout
  title="Form Layout Example"
  description="This is a form layout with title, description, form fields, and actions."
  error="This is an example error message."
  actions={
    <div className="flex justify-between w-full">
      <Button variant="outline">Cancel</Button>
      <Button type="submit">Submit</Button>
    </div>
  }
>
  <div className="space-y-4">
    <div className="space-y-2">
      <Label htmlFor="name">Name</Label>
      <Input id="name" placeholder="Enter your name" />
    </div>
    <div className="space-y-2">
      <Label htmlFor="email">Email</Label>
      <Input id="email" type="email" placeholder="Enter your email" />
    </div>
  </div>
</FormLayout>

<ListLayout
  header={
    <div className="flex justify-between items-center mb-4">
      <h2 className="text-2xl font-semibold">Users</h2>
      <Button>Add User</Button>
    </div>
  }
  footer={
    <div className="flex justify-between items-center">
      <p className="text-sm text-muted-foreground">Showing 3 of 10 users</p>
      <div className="flex gap-2">
        <Button variant="outline" size="sm">Previous</Button>
        <Button variant="outline" size="sm">Next</Button>
      </div>
    </div>
  }
>
  <Table>
    {/* Table content */}
  </Table>
</ListLayout>

<DetailLayout
  title="User Details"
  description="View and manage user information"
  tabs={[
    {
      value: "details",
      label: "Details",
      content: (
        <div className="space-y-4 py-4">
          {/* Details content */}
        </div>
      ),
    },
    {
      value: "history",
      label: "History",
      content: (
        <div className="py-4">
          {/* History content */}
        </div>
      ),
    },
  ]}
  footer={
    <div className="flex justify-between w-full">
      <Button variant="outline">Back</Button>
      <div className="flex gap-2">
        <Button variant="outline">Edit</Button>
        <Button variant="destructive">Delete</Button>
      </div>
    </div>
  }
/>