Section Headers

export default function Basic() {
  return (
    <section className="mx-auto max-w-7xl px-4">
      <div className="border-b">
        <div className="max-w-lg space-y-0.5 py-6">
          <h2 className="text-sm font-medium">Bookmark Folders</h2>
          <p className="text-sm text-muted-foreground">
            You can organize your bookmarks into folders to help you find them
            easier.
          </p>
        </div>
      </div>
    </section>
  );
}

import { Button } from "@/components/ui/button";
import { Plus } from "@mynaui/icons-react";

export default function WithButtons() {
  return (
    <section className="mx-auto max-w-7xl px-4">
      <div className="flex flex-col justify-between space-y-4 border-b py-6 md:flex-row md:items-center md:space-x-10 md:space-y-0">
        <div className="max-w-lg space-y-0.5">
          <h2 className="text-sm font-medium">Bookmark Folders</h2>
          <p className="text-sm text-muted-foreground">
            You can organize your bookmarks into folders to help you find them
            easier.
          </p>
        </div>
        <div className="flex items-center space-x-2 md:flex-row-reverse md:space-x-reverse">
          <Button size="sm" className="gap-2">
            <Plus className="size-4 stroke-2" />
            Add Folder
          </Button>
          <Button size="sm" variant="outline">
            Manage Folders
          </Button>
        </div>
      </div>
    </section>
  );
}

import { Avatar, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { Share } from "@mynaui/icons-react";

export default function WithAvatar() {
  return (
    <section className="mx-auto max-w-7xl px-4">
      <div className="flex flex-col justify-between space-y-4 border-b py-6 md:flex-row md:items-center md:space-x-10 md:space-y-0">
        <div className="flex max-w-lg items-center space-x-2">
          <Avatar>
            <AvatarImage src="https://mynaui.com/avatars/avatar-01.jpg" />
          </Avatar>
          <div>
            <h2 className="text-sm font-medium">Praveen Juge</h2>
            <p className="text-sm text-muted-foreground">@praveenjuge</p>
          </div>
        </div>
        <Button size="sm" className="gap-2">
          <Share className="size-4" />
          Share
        </Button>
      </div>
    </section>
  );
}

export default function OnlyTitle() {
  return (
    <section className="mx-auto max-w-7xl px-4">
      <div className="border-b py-4">
        <h2 className="text-sm font-medium">All Bookmarks</h2>
      </div>
    </section>
  );
}

export default function TitleWithSubtitle() {
  return (
    <section className="mx-auto max-w-7xl px-4">
      <div className="flex gap-2 border-b py-4">
        <h2 className="text-sm font-medium">All Bookmarks</h2>
        <p className="text-sm text-muted-foreground">140 Total</p>
      </div>
    </section>
  );
}