Shadcn Dialog

import { X } from "lucide-react"

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

export function DialogDemo() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Open</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Creative Tim UI</DialogTitle>
        </DialogHeader>
        <DialogDescription className="mt-2 mb-6">
          Creative Tim UI is an open-source library that uses the power of
          Tailwind CSS and React to help you build unique web projects faster
          and easier. The stunning design inspired by Material Design is a
          bonus! Get Creative Tim UI and take advantage of its free components
          and features that will help you set up your web project quickly.
        </DialogDescription>
        <DialogFooter>
          <Button variant="ghost" className="text-destructive">
            Cancel
          </Button>
          <Button>Get Started</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

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

export function DialogLong() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Long Dialog</Button>
      </DialogTrigger>
      <DialogContent className="max-h-[90vh]">
        <DialogHeader>
          <DialogTitle>Long Dialog</DialogTitle>
        </DialogHeader>
        <div className="max-h-[60vh] overflow-y-auto">
          <DialogDescription className="h-full">
            I&apos;ve always had unwavering confidence in my abilities, and I
            believe our thoughts and self-perception are the primary forces that
            shape us. Many people limit themselves by their own self-doubt,
            slowing their progress. Fortunately, I was raised with the belief
            that I could achieve anything.
            <br />
            <br />
            As we journey through life, we often encounter challenges that
            harden our hearts. Pain, insults, broken trust, and betrayal can
            make us hesitant to help others. Love can lead to heartbreak, and
            time can distance us from family. These experiences can gradually
            erode our optimism.
            <br />
            <br />
            Life doesn&apos;t always place us where we want to be. We grow, make
            mistakes, and strive to express ourselves and fulfill our dreams. If
            we&apos;re fortunate enough to participate in life&apos;s journey,
            we should cherish every moment. Regrettably, some only recognize the
            value of a moment after it&apos;s passed.
            <br />
            <br />
            One thing I&apos;ve learned is that I can excel at anything I set my
            mind to. My skill is my ability to learn. I&apos;m here to learn, to
            grow, and to inspire others to do the same. Don&apos;t fear making
            mistakes; they teach us far more than compliments ever will.
            Ultimately, what truly matters is how our actions inspire and
            motivate others. Some will be ignited by our endeavors, while others
            may be offended—it&apos;s all part of the process. I&apos;m here to
            pursue my dreams and encourage others to do the same.
            <br />
            <br />
            Now is the time to embrace greatness without fear of judgment. Some
            may resent those who shine brightly or stand out, but it&apos;s time
            to be the best version of ourselves. Do you have faith in your
            beliefs, even if you&apos;re the only one who does?
            <br />
            <br />
            As we journey through life, we often encounter challenges that
            harden our hearts. Pain, insults, broken trust, and betrayal can
            make us hesitant to help others. Love can lead to heartbreak, and
            time can distance us from family. These experiences can gradually
            erode our optimism.
            <br />
            <br />
            Life doesn&apos;t always place us where we want to be. We grow, make
            mistakes, and strive to express ourselves and fulfill our dreams. If
            we&apos;re fortunate enough to participate in life&apos;s journey,
            we should cherish every moment. Regrettably, some only recognize the
            value of a moment after it&apos;s passed.
            <br />
            <br />
            One thing I&apos;ve learned is that I can excel at anything I set my
            mind to. My skill is my ability to learn. I&apos;m here to learn, to
            grow, and to inspire others to do the same. Don&apos;t fear making
            mistakes; they teach us far more than compliments ever will.
            Ultimately, what truly matters is how our actions inspire and
            motivate others. Some will be ignited by our endeavors, while others
            may be offended—it&apos;s all part of the process. I&apos;m here to
            pursue my dreams and encourage others to do the same.
            <br />
            <br />
            Now is the time to embrace greatness without fear of judgment. Some
            may resent those who shine brightly or stand out, but it&apos;s time
            to be the best version of ourselves. Do you have faith in your
            beliefs, even if you&apos;re the only one who does? As we journey
            through life, we often encounter challenges that harden our hearts.
            Pain, insults, broken trust, and betrayal can make us hesitant to
            help others. Love can lead to heartbreak, and time can distance us
            from family. These experiences can gradually erode our optimism.
            <br />
            <br />
            Life doesn&apos;t always place us where we want to be. We grow, make
            mistakes, and strive to express ourselves and fulfill our dreams. If
            we&apos;re fortunate enough to participate in life&apos;s journey,
            we should cherish every moment. Regrettably, some only recognize the
            value of a moment after it&apos;s passed.
            <br />
            <br />
            One thing I&apos;ve learned is that I can excel at anything I set my
            mind to. My skill is my ability to learn. I&apos;m here to learn, to
            grow, and to inspire others to do the same. Don&apos;t fear making
            mistakes; they teach us far more than compliments ever will.
            Ultimately, what truly matters is how our actions inspire and
            motivate others. Some will be ignited by our endeavors, while others
            may be offended—it&apos;s all part of the process. I&apos;m here to
            pursue my dreams and encourage others to do the same.
            <br />
            <br />
            Now is the time to embrace greatness without fear of judgment. Some
            may resent those who shine brightly or stand out, but it&apos;s time
            to be the best version of ourselves. Do you have faith in your
            beliefs, even if you&apos;re the only one who does?
          </DialogDescription>
        </div>
        <DialogFooter>
          <Button variant="ghost" className="text-destructive">
            Cancel
          </Button>
          <Button>Confirm</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"

export function DialogMessage() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Open Message</Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>New message to @</DialogTitle>
          <DialogDescription>
            Write the message and then click button.
          </DialogDescription>
        </DialogHeader>
        <form action="#" className="mt-6">
          <div className="mt-2 mb-4 space-y-1.5">
            <Label htmlFor="username" className="font-semibold">
              Username
            </Label>
            <Input
              id="username"
              type="text"
              placeholder="Username"
              className="w-full"
            />
          </div>
          <div className="w-full space-y-1.5">
            <Label htmlFor="message" className="font-medium">
              Message
            </Label>
            <Textarea id="message" placeholder="Your message..." />
          </div>
          <DialogFooter className="mt-4">
            <Button type="button" variant="secondary">
              Cancel
            </Button>
            <Button type="submit">Send Message</Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  )
}

import { Bell } from "lucide-react"

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

export function DialogNotification() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Open Notification</Button>
      </DialogTrigger>
      <DialogContent className="p-8 sm:max-w-md">
        <DialogHeader className="text-center">
          <DialogTitle className="text-center">
            Your Attention is Required!
          </DialogTitle>
          <DialogDescription className="text-center">
            Choose which card you want to connect
          </DialogDescription>
        </DialogHeader>
        <div className="mt-12 flex flex-col items-center text-center">
          <Bell className="mb-6 h-24 w-24" />
          <h6 className="text-lg font-semibold">You should read this!</h6>
          <p className="text-muted-foreground mt-2 text-center">
            Many people limit themselves by their own self-doubt, slowing their
            progress. Fortunately, I was raised with the belief that I could
            achieve anything.
          </p>
        </div>
        <DialogFooter className="mt-8 mb-1">
          <Button variant="ghost" className="text-destructive">
            Cancel
          </Button>
          <Button>Got it</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

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

export function DialogSizes() {
  return (
    <div className="flex flex-col items-center justify-center gap-2">
      <div className="flex items-center justify-center gap-2">
        <Dialog>
          <DialogTrigger asChild>
            <Button>Open XS</Button>
          </DialogTrigger>
          <DialogContent className="sm:max-w-xs">
            <DialogHeader>
              <DialogTitle>Creative Tim UI</DialogTitle>
            </DialogHeader>
            <DialogDescription className="mt-2 mb-6">
              Creative Tim UI is an open-source library that uses the power of
              Tailwind CSS and React to help you build unique web projects
              faster and easier. The stunning design inspired by Material Design
              is a bonus! Get Creative Tim UI and take advantage of its free
              components and features that will help you set up your web project
              quickly.
            </DialogDescription>
            <DialogFooter>
              <Button variant="ghost" className="text-destructive">
                Cancel
              </Button>
              <Button>Get Started</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
        <Dialog>
          <DialogTrigger asChild>
            <Button>Open SM</Button>
          </DialogTrigger>
          <DialogContent className="sm:max-w-md">
            <DialogHeader>
              <DialogTitle>Creative Tim UI</DialogTitle>
            </DialogHeader>
            <DialogDescription className="mt-2 mb-6">
              Creative Tim UI is an open-source library that uses the power of
              Tailwind CSS and React to help you build unique web projects
              faster and easier. The stunning design inspired by Material Design
              is a bonus! Get Creative Tim UI and take advantage of its free
              components and features that will help you set up your web project
              quickly.
            </DialogDescription>
            <DialogFooter>
              <Button variant="ghost" className="text-destructive">
                Cancel
              </Button>
              <Button>Get Started</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
        <Dialog>
          <DialogTrigger asChild>
            <Button>Open MD</Button>
          </DialogTrigger>
          <DialogContent className="sm:max-w-lg">
            <DialogHeader>
              <DialogTitle>Creative Tim UI</DialogTitle>
            </DialogHeader>
            <DialogDescription className="mt-2 mb-6">
              Creative Tim UI is an open-source library that uses the power of
              Tailwind CSS and React to help you build unique web projects
              faster and easier. The stunning design inspired by Material Design
              is a bonus! Get Creative Tim UI and take advantage of its free
              components and features that will help you set up your web project
              quickly.
            </DialogDescription>
            <DialogFooter>
              <Button variant="ghost" className="text-destructive">
                Cancel
              </Button>
              <Button>Get Started</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>
      <div className="flex items-center justify-center gap-2">
        <Dialog>
          <DialogTrigger asChild>
            <Button>Open LG</Button>
          </DialogTrigger>
          <DialogContent className="sm:max-w-2xl">
            <DialogHeader>
              <DialogTitle>Creative Tim UI</DialogTitle>
            </DialogHeader>
            <DialogDescription className="mt-2 mb-6">
              Creative Tim UI is an open-source library that uses the power of
              Tailwind CSS and React to help you build unique web projects
              faster and easier. The stunning design inspired by Material Design
              is a bonus! Get Creative Tim UI and take advantage of its free
              components and features that will help you set up your web project
              quickly.
            </DialogDescription>
            <DialogFooter>
              <Button variant="ghost" className="text-destructive">
                Cancel
              </Button>
              <Button>Get Started</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
        <Dialog>
          <DialogTrigger asChild>
            <Button>Open XL</Button>
          </DialogTrigger>
          <DialogContent className="sm:max-w-4xl">
            <DialogHeader>
              <DialogTitle>Creative Tim UI</DialogTitle>
            </DialogHeader>
            <DialogDescription className="mt-2 mb-6">
              Creative Tim UI is an open-source library that uses the power of
              Tailwind CSS and React to help you build unique web projects
              faster and easier. The stunning design inspired by Material Design
              is a bonus! Get Creative Tim UI and take advantage of its free
              components and features that will help you set up your web project
              quickly.
            </DialogDescription>
            <DialogFooter>
              <Button variant="ghost" className="text-destructive">
                Cancel
              </Button>
              <Button>Get Started</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
        <Dialog>
          <DialogTrigger asChild>
            <Button>Open Screen</Button>
          </DialogTrigger>
          <DialogContent className="sm:h-[95vh] sm:max-w-[95vw]">
            <DialogHeader>
              <DialogTitle>Creative Tim UI</DialogTitle>
            </DialogHeader>
            <DialogDescription className="mt-2 mb-6">
              Creative Tim UI is an open-source library that uses the power of
              Tailwind CSS and React to help you build unique web projects
              faster and easier. The stunning design inspired by Material Design
              is a bonus! Get Creative Tim UI and take advantage of its free
              components and features that will help you set up your web project
              quickly.
            </DialogDescription>
            <DialogFooter>
              <Button variant="ghost" className="text-destructive">
                Cancel
              </Button>
              <Button>Get Started</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>
    </div>
  )
}

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

export function DialogWeb3() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Connect Wallet</Button>
      </DialogTrigger>
      <DialogContent className="pb-4 sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Connect a Wallet</DialogTitle>
          <DialogDescription>
            Choose which card you want to connect
          </DialogDescription>
        </DialogHeader>
        <div className="mt-4">
          <h6 className="mb-2 font-semibold">Popular</h6>
          <div className="space-y-2">
            <Button
              variant="secondary"
              className="flex w-full items-center justify-center gap-2"
            >
              <img
                alt="metamask"
                src="https://docs.material-tailwind.com/icons/metamask.svg"
                className="h-5 w-5"
              />
              <span className="font-semibold">Connect with MetaMask</span>
            </Button>
            <Button
              variant="secondary"
              className="flex w-full items-center justify-center gap-2"
            >
              <img
                alt="coinbase"
                src="https://docs.material-tailwind.com/icons/coinbase.svg"
                className="h-6 w-6 rounded"
              />
              <span className="font-semibold">Connect with Coinbase</span>
            </Button>
          </div>
          <h6 className="mt-6 mb-2 font-semibold">Other</h6>
          <Button
            variant="secondary"
            className="flex w-full items-center justify-center gap-2"
          >
            <img
              alt="trust-wallet"
              src="https://docs.material-tailwind.com/icons/trust-wallet.svg"
              className="h-6 w-6 rounded"
            />
            <span className="font-semibold">Connect with Trust Wallet</span>
          </Button>
        </div>
        <div className="mt-12 flex w-full items-center justify-between gap-2">
          <p className="text-muted-foreground text-sm">
            New to Ethereum wallets?
          </p>
          <Button variant="outline" size="sm">
            Learn More
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}

import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export function DialogWithForm() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Sign In</Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Sign In</DialogTitle>
          <DialogDescription>
            Enter your email and password to Sign In.
          </DialogDescription>
        </DialogHeader>
        <form action="#" className="mt-6">
          <div className="mt-2 mb-4 space-y-1.5">
            <Label htmlFor="email" className="font-semibold">
              Email
            </Label>
            <Input id="email" type="email" placeholder="[email protected]" />
          </div>
          <div className="mb-4 space-y-1.5">
            <Label htmlFor="password" className="font-semibold">
              Password
            </Label>
            <Input id="password" type="password" placeholder="************" />
          </div>
          <div className="mb-4 flex items-center gap-2">
            <Checkbox id="checkbox" />
            <Label
              htmlFor="checkbox"
              className="cursor-pointer text-sm font-normal"
            >
              Remember Me
            </Label>
          </div>
          <Button type="submit" className="w-full">
            Sign In
          </Button>
        </form>
        <p className="text-muted-foreground mt-3 mb-2 flex items-center justify-center gap-1 text-sm">
          Don&apos;t have an account?{" "}
          <a href="#" className="text-primary font-semibold">
            Sign up
          </a>
        </p>
      </DialogContent>
    </Dialog>
  )
}

import { Heart, Share2 } from "lucide-react"

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog"

export function DialogWithImage() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <button className="cursor-pointer outline-none">
          <img
            alt="nature"
            src="https://images.unsplash.com/photo-1501854140801-50d01698950b?auto=format&w=2000&q=85"
            className="h-64 w-auto rounded-lg object-cover object-center"
          />
        </button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-4xl">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <Avatar>
              <AvatarImage
                src="https://images.unsplash.com/photo-1574015974293-817f0ebebb74?auto=format&fit=crop&q=80&w=400&h=400"
                alt="alex andrew"
              />
              <AvatarFallback>AA</AvatarFallback>
            </Avatar>
            <div className="flex flex-col">
              <span className="font-semibold">Alex Andrew</span>
              <span className="text-muted-foreground text-sm">@alexandrew</span>
            </div>
          </div>
          <div className="flex items-center gap-2">
            <Button size="sm" variant="ghost" className="text-destructive">
              <Heart className="h-4 w-4" />
            </Button>
            <Button size="sm">Free Download</Button>
          </div>
        </div>
        <div className="my-4">
          <img
            alt="nature"
            src="https://images.unsplash.com/photo-1501854140801-50d01698950b?auto=format&w=2000&q=85"
            className="h-[48rem] w-full rounded-lg object-cover object-center"
          />
        </div>
        <div className="flex items-end justify-between">
          <div className="flex items-center gap-16">
            <div>
              <p className="text-muted-foreground text-sm">Views</p>
              <p className="font-semibold">44,082,044</p>
            </div>
            <div>
              <p className="text-muted-foreground text-sm">Downloads</p>
              <p className="font-semibold">553,031</p>
            </div>
          </div>
          <Button size="sm" variant="ghost">
            <Share2 className="mr-1.5 h-4 w-4" /> Share
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}