Dialog Media

import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogMedia,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselPrevious,
CarouselNext,
} from "@/components/ui/carousel"

export default function CarouselDialog() {
return (
  <Dialog>
    <DialogTrigger asChild>
      <Button variant="outline">Carousel Media</Button>
    </DialogTrigger>
    <DialogContent showCloseButton={false} className="sm:max-w-md">
      <DialogMedia className="overflow-hidden p-16">
        <Carousel>
          <CarouselContent>
            {Array.from({ length: 5 }).map((_, index) => (
              <CarouselItem key={index}>
                <Card>
                  <CardContent className="flex aspect-square items-center justify-center p-6">
                    <span className="text-4xl font-semibold">{index + 1}</span>
                  </CardContent>
                </Card>
              </CarouselItem>
            ))}
          </CarouselContent>
          <CarouselPrevious />
          <CarouselNext />
        </Carousel>
      </DialogMedia>
      <DialogHeader>
        <DialogTitle>What's new</DialogTitle>
        <DialogDescription>
          See what we've been working on this month.
        </DialogDescription>
      </DialogHeader>
      <DialogFooter>
        <DialogClose asChild>
          <Button variant="outline">Dismiss</Button>
        </DialogClose>
        <Button>Learn more</Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>
)
}

"use client"

import { Button } from "@/components/ui/button"
import {
CheckIcon,
SparklesIcon,
RocketIcon,
PartyPopperIcon,
} from "lucide-react"
import React from "react"
import { cn } from "@/lib/utils"
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogMedia,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog"

const steps = [
{
  title: "Welcome to Acme",
  description: "We're excited to have you here. Let's get you set up.",
  icon: SparklesIcon,
},
{
  title: "Discover features",
  description: "Explore powerful tools designed to boost your productivity.",
  icon: RocketIcon,
},
{
  title: "You're all set!",
  description: "Your workspace is ready. Start creating amazing things today.",
  icon: PartyPopperIcon,
},
]

export default function OnboardingDialog() {
const [currentStep, setCurrentStep] = React.useState(0)
const step = steps[currentStep]
const Icon = step.icon

return (
  <Dialog>
    <DialogTrigger asChild>
      <Button variant="outline">Multi-step</Button>
    </DialogTrigger>
    <DialogContent className="sm:max-w-md">
      <DialogMedia className="border-b aspect-3/2 flex flex-col items-center justify-center gap-6">
        <div className="size-24 rounded-xl bg-background border flex items-center justify-center shadow-xl">
          <Icon className="size-12 stroke-1 stroke-foreground" />
        </div>
        <div className="flex items-center gap-2">
          {steps.map((_, index) => (
            <button
              key={index}
              onClick={() => setCurrentStep(index)}
              className={cn(
                "size-1.5 rounded-full transition-all",
                index === currentStep
                  ? "bg-foreground w-6"
                  : index < currentStep
                    ? "bg-foreground/60"
                    : "bg-foreground/20"
              )}
            />
          ))}
        </div>
      </DialogMedia>
      <DialogHeader>
        <DialogTitle>{step.title}</DialogTitle>
        <DialogDescription>{step.description}</DialogDescription>
      </DialogHeader>
      <DialogFooter>
        <Button
          variant="ghost"
          onClick={() => setCurrentStep(Math.max(0, currentStep - 1))}
          disabled={currentStep === 0}
        >
          Back
        </Button>
        <Button onClick={() => setCurrentStep(Math.min(steps.length - 1, currentStep + 1))}>
          {currentStep === steps.length - 1 ? (
            <>
              <CheckIcon className="size-4" />
              Get started
            </>
          ) : (
            "Next"
          )}
        </Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>
)
}

"use client"

import { Button } from "@/components/ui/button"
import { Slider } from "@/components/ui/slider"
import { ZoomInIcon, ZoomOutIcon } from "lucide-react"
import Image from "next/image"
import React from "react"
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogMedia,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog"

export default function ImageCropDialog() {
const [zoom, setZoom] = React.useState([1])
const [position, setPosition] = React.useState({ x: 0, y: 0 })
const [isDragging, setIsDragging] = React.useState(false)
const dragStart = React.useRef({ x: 0, y: 0 })
const positionStart = React.useRef({ x: 0, y: 0 })

const handleMouseDown = (e: React.MouseEvent) => {
  setIsDragging(true)
  dragStart.current = { x: e.clientX, y: e.clientY }
  positionStart.current = { x: position.x, y: position.y }
}

const handleMouseMove = (e: React.MouseEvent) => {
  if (!isDragging) return
  const dx = e.clientX - dragStart.current.x
  const dy = e.clientY - dragStart.current.y
  const maxOffset = ((zoom[0] - 1) / zoom[0]) * 50
  setPosition({
    x: Math.max(-maxOffset, Math.min(maxOffset, positionStart.current.x + dx / 3)),
    y: Math.max(-maxOffset, Math.min(maxOffset, positionStart.current.y + dy / 3)),
  })
}

const handleMouseUp = () => setIsDragging(false)

return (
  <Dialog>
    <DialogTrigger asChild>
      <Button variant="outline">Image Crop</Button>
    </DialogTrigger>
    <DialogContent className="sm:max-w-md">
      <DialogMedia
        className="aspect-square overflow-hidden p-0 bg-black relative select-none"
        onMouseDown={handleMouseDown}
        onMouseMove={handleMouseMove}
        onMouseUp={handleMouseUp}
        onMouseLeave={handleMouseUp}
        style={{ cursor: isDragging ? "grabbing" : "grab" }}
      >
        <div className="absolute inset-0 flex items-center justify-center z-10 pointer-events-none">
          <div className="size-[90%] border-2 border-white/80 rounded-full" />
        </div>
        <div
          className="absolute inset-0 bg-black/30 z-5 pointer-events-none"
          style={{
            maskImage: "radial-gradient(circle at center, transparent 65%, black 65%)",
            WebkitMaskImage: "radial-gradient(circle at center, transparent 64%, black 64%)",
          }}
        />
        <Image
          fill
          src="/your-image.jpg"
          alt="Image to crop"
          className="object-cover pointer-events-none"
          draggable={false}
          style={{ transform: `scale(${zoom[0]}) translate(${position.x}%, ${position.y}%)` }}
        />
      </DialogMedia>
      <DialogHeader>
        <DialogTitle>Crop image</DialogTitle>
        <DialogDescription>Drag to reposition. Use the slider to zoom.</DialogDescription>
      </DialogHeader>
      <div className="flex items-center gap-4">
        <ZoomOutIcon className="size-4 text-muted-foreground" />
        <Slider value={zoom} onValueChange={setZoom} min={1} max={3} step={0.1} className="flex-1" />
        <ZoomInIcon className="size-4 text-muted-foreground" />
      </div>
      <DialogFooter className="flex gap-2">
        <DialogClose asChild>
          <Button variant="outline" className="flex-1">Cancel</Button>
        </DialogClose>
        <Button className="flex-1">Apply</Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>
)
}

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

export default function VideoDialog() {
return (
  <Dialog>
    <DialogTrigger asChild>
      <Button variant="outline">Video Player</Button>
    </DialogTrigger>
    <DialogContent className="sm:max-w-lg border-none">
      <DialogMedia className="aspect-video overflow-hidden p-0 bg-black">
        <video
          className="size-full object-cover"
          controls
          poster="/video-poster.jpg"
        >
          <source src="/demo-video.mp4" type="video/mp4" />
          Your browser does not support the video tag.
        </video>
      </DialogMedia>
      <DialogHeader>
        <DialogTitle>Getting started tutorial</DialogTitle>
        <DialogDescription>
          Learn how to set up your workspace in under 5 minutes.
        </DialogDescription>
      </DialogHeader>
      <DialogFooter>
        <DialogClose asChild>
          <Button variant="outline">Watch later</Button>
        </DialogClose>
        <Button>Continue</Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>
)
}

"use client"

import { Button } from "@/components/ui/button"
import { AlertTriangleIcon } from "lucide-react"
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogMedia,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog"

export default function ConfirmationDialog() {
return (
  <Dialog>
    <DialogTrigger asChild>
      <Button variant="outline">Destructive</Button>
    </DialogTrigger>
    <DialogContent className="sm:max-w-md">
      <DialogMedia className="aspect-2/1 flex items-center justify-center bg-destructive/5">
        <div className="size-16 rounded-full bg-destructive/5 flex items-center justify-center">
          <AlertTriangleIcon className="size-8 text-destructive" />
        </div>
      </DialogMedia>
      <DialogHeader>
        <DialogTitle>Delete project?</DialogTitle>
        <DialogDescription>
          This action cannot be undone. This will permanently delete your
          project and remove all associated data.
        </DialogDescription>
      </DialogHeader>
      <DialogFooter>
        <DialogClose asChild>
          <Button variant="outline">Cancel</Button>
        </DialogClose>
        <Button variant="destructive">Delete project</Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>
)
}