Popover

import { Button } from "@/components/ui/button";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";

export default function Component() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">Open Popover</Button>
      </PopoverTrigger>
      <PopoverContent className="w-80 space-y-2">
        <h4 className="font-medium leading-none">Popover Title</h4>
        <p className="text-muted-foreground">
          This is some basic text inside the popover content.
        </p>
      </PopoverContent>
    </Popover>
  );
}

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { Plus } from "@mynaui/icons-react";

export default function AddButton() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline" size="icon">
          <Plus className="size-5" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-80 p-5">
        <div className="space-y-4">
          <div>
            <h3 className="font-medium">Add Book</h3>
            <p className="text-muted-foreground">
              Fill out the form to add a new book.
            </p>
          </div>
          <form className="space-y-4">
            <div className="space-y-1">
              <Label htmlFor="title">Title</Label>
              <Input id="title" placeholder="Enter book title" />
            </div>
            <div className="space-y-1">
              <Label htmlFor="author">Author</Label>
              <Input id="author" placeholder="Enter author name" />
            </div>
            <Button type="submit" size="sm">
              Add Book
            </Button>
          </form>
        </div>
      </PopoverContent>
    </Popover>
  );
}

import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { Send } from "@mynaui/icons-react";

export default function User() {
  return (
    <Popover>
      <PopoverTrigger className="flex items-center gap-2">
        <Avatar>
          <AvatarFallback>PJ</AvatarFallback>
        </Avatar>
        <span className="font-medium">Praveen Juge</span>
      </PopoverTrigger>
      <PopoverContent className="grid w-80 gap-4 p-4 text-sm">
        <div className="flex items-center gap-3">
          <Avatar className="size-8">
            <AvatarFallback>PJ</AvatarFallback>
          </Avatar>
          <div>
            <div className="font-medium">Praveen Juge</div>
            <div className="text-muted-foreground">hi@praveenjuge.com</div>
          </div>
        </div>
        <div className="text-muted-foreground">
          Praveen is designer that specialize in UI design, accessibility, CSS
          and design systems with a knack for pixel-perfect outcomes.
        </div>
        <div className="flex gap-2">
          <Button variant="outline" className="flex-1">
            View Profile
          </Button>
          <Button className="flex-1">
            <Send className="size-4 stroke-2" />
            Message
          </Button>
        </div>
      </PopoverContent>
    </Popover>
  );
}

import { Button } from "@/components/ui/button";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";

export default function ColorPicker() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline" className="text-sm">
          Pick Color
        </Button>
      </PopoverTrigger>
      <PopoverContent className="flex gap-2 p-3">
        {[
          "bg-red-500",
          "bg-green-500",
          "bg-blue-500",
          "bg-yellow-500",
        ].map((color) => (
          <button
            key={color}
            className={`${color} size-6 rounded-full border`}
            aria-label={color}
          />
        ))}
      </PopoverContent>
    </Popover>
  );
}

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Calendar } from "@mynaui/icons-react";

export default function SchedulePopover() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline" size="icon">
          <Calendar className="size-5" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-64 space-y-2 p-4 text-sm">
        <h3 className="font-medium">Schedule Event</h3>
        <div className="grid gap-2">
          <label htmlFor="date">Date</label>
          <Input id="date" type="date" />
        </div>
        <div className="grid gap-2">
          <label htmlFor="time">Time</label>
          <Input id="time" type="time" />
        </div>
        <Button size="sm" className="w-full">
          Save
        </Button>
      </PopoverContent>
    </Popover>
  );
}

import { Button } from "@/components/ui/button";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { CreditCard } from "@mynaui/icons-react";

export default function PaymentDetails() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline" className="flex items-center gap-2 text-sm">
          <CreditCard className="size-4" /> Payment
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-72 p-4 text-sm">
        <div className="space-y-1">
          <div className="font-medium">Visa ending 1234</div>
          <div className="text-muted-foreground">Expires 04/26</div>
        </div>
        <Button size="sm" className="mt-3 w-full">
          Manage Card
        </Button>
      </PopoverContent>
    </Popover>
  );
}