Dialog

import { Button } from "@/components/ui/button";
import { Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger } from "@/components/ui/dialog";

export default function DemoOne() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="outline">Dialog Scrollable</Button>
      </DialogTrigger>
      <DialogContent className="md:max-w-[640px]">
        <DialogHeader>
          <DialogTitle>Elephant</DialogTitle>
          <DialogDescription>
            Elephants are the largest living land animals.
          </DialogDescription>
        </DialogHeader>
        <div className="flex flex-col gap-4">
          <img
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/African_Bush_Elephant.jpg/500px-African_Bush_Elephant.jpg"
            alt="Elephent"
          />
          <p>
            Elephants are the largest living land animals. Three living
            species are currently recognised: the African bush elephant
            (Loxodonta africana), the African forest elephant (L.
            cyclotis), and the Asian elephant (Elephas maximus). They
            are the only surviving members of the family Elephantidae
            and the order Proboscidea; extinct relatives include
            mammoths and mastodons. Distinctive features of elephants
            include a long proboscis called a trunk, tusks, large ear
            flaps, pillar-like legs, and tough but sensitive grey skin.
            The trunk is prehensile, bringing food and water to the
            mouth and grasping objects. Tusks, which are derived from
            the incisor teeth, serve both as weapons and as tools for
            moving objects and digging. The large ear flaps assist in
            maintaining a constant body temperature as well as in
            communication. African elephants have larger ears and
            concave backs, whereas Asian elephants have smaller ears and
            convex or level backs.
          </p>
        </div>
        <DialogFooter className="flex gap-3">
          <DialogClose asChild className="grow">
            <Button variant="outline" className="grow" size={"lg"}>
              Cancel
            </Button>
          </DialogClose>
          <Button type="submit" className="grow" size={"lg"}>
            Okay
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}