llmad/dash-registratori
1
0
Fork 0
Code Issues 3 Pull requests Projects 1 Releases Packages Wiki Activity Actions

Compare commits

base: llmad:55a16da28f6c4ce41f26fadce678b94447bbffe4
Branches Tags
llmad:main
llmad:refactor
..
compare: llmad:f96dcd87cb4a86e8ded6cdd3858ff7d706882160
Branches Tags
llmad:main
llmad:refactor

2 commits
55a16da28f ... f96dcd87cb

Author SHA1 Message Date
Mouad Lahlal
f96dcd87cb Merge pull request 'feat: sidebar adapts to the screen showed' (#2) from feat-sidebar-per-page into main 
Reviewed-on: #2
 2025-10-28 14:03:15 +00:00
Mouad Lahlal
8c4970767b feat: sidebar adapts to the screen showed 2025-10-28 11:33:26 +01:00
8 changed files with 386 additions and 93 deletions
Show stats Expand all files Collapse all files

18
src/app/client/[client]/page.tsx → src/app/client/page.tsx
View file

@ -1,14 +1,12 @@
"use client"; "use client";
import { AppSidebar } from "@/components/app-sidebar";
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
import ClientCard from "@/components/client-card"; import ClientCard from "@/components/client-card";
import DeviceCard from "@/components/device-card"; import DeviceCard from "@/components/device-card";
import { useSearchParams, useParams } from "next/navigation"; import { useSearchParams } from "next/navigation";
export default function Page() { export default function Page() {
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const { client } = useParams(); const client = searchParams.get("client");
const clienti = [ const clienti = [
{ {
@ -90,23 +88,11 @@ export default function Page() {
]; ];
return ( return (
<SidebarProvider
style={
{
"--sidebar-width": "350px",
} as React.CSSProperties
}
>
<AppSidebar />
<SidebarInset>
<div className="flex flex-1 flex-col gap-4 p-4"> <div className="flex flex-1 flex-col gap-4 p-4">
<div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4"> <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
<ClientCard client={client} /> <ClientCard client={client} />
<DeviceCard clienti={clienti} /> <DeviceCard clienti={clienti} />
</div> </div>
</div> </div>
</SidebarInset>
</SidebarProvider>
); );
} }

11
src/app/dashboard/page.tsx
View file

@ -32,21 +32,10 @@ import { useSearchParams } from "next/navigation";
export default function Page() { export default function Page() {
return ( return (
<SidebarProvider
style={
{
"--sidebar-width": "350px",
} as React.CSSProperties
}
>
<AppSidebar />
<SidebarInset>
<div className="flex flex-1 flex-col gap-4 p-4"> <div className="flex flex-1 flex-col gap-4 p-4">
<div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4"> <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
THIS IS A DASHBOARD, AND I DON'T KNOW WHAT TO PUT IN IT THIS IS A DASHBOARD, AND I DON'T KNOW WHAT TO PUT IN IT
</div> </div>
</div> </div>
</SidebarInset>
</SidebarProvider>
); );
} }

13
src/app/layout.tsx
View file

@ -1,6 +1,8 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google"; import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css"; import "./globals.css";
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
import { AppSidebar } from "@/components/app-sidebar";
const geistSans = Geist({ const geistSans = Geist({
variable: "--font-geist-sans", variable: "--font-geist-sans",
@ -27,7 +29,18 @@ export default function RootLayout({
<body <body
className={`${geistSans.variable} ${geistMono.variable} antialiased`} className={`${geistSans.variable} ${geistMono.variable} antialiased`}
> >
<SidebarProvider
style={
{
"--sidebar-width": "350px",
} as React.CSSProperties
}
>
<AppSidebar />
<SidebarInset>
{children} {children}
</SidebarInset>
</SidebarProvider>
</body> </body>
</html> </html>
); );

20
src/app/map/page.tsx
View file

@ -1,27 +1,19 @@
"use client"; "use client";
import { AppSidebar } from "@/components/app-sidebar";
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import { useSearchParams } from "next/navigation";
export default function Page() { export default function Page() {
const MapWithNoSSR = dynamic(() => import("../../components/map"), { const MapWithNoSSR = dynamic(() => import("../../components/map"), {
ssr: false, ssr: false,
}); });
const searchParams = useSearchParams();
const client = searchParams.get("client");
return ( return (
<SidebarProvider
style={
{
"--sidebar-width": "350px",
} as React.CSSProperties
}
>
<AppSidebar />
<SidebarInset>
<div id="map" className="w-full h-full border rounded-md m-0 p-0"> <div id="map" className="w-full h-full border rounded-md m-0 p-0">
<MapWithNoSSR /> <MapWithNoSSR highlight={client} />
</div> </div>
</SidebarInset>
</SidebarProvider>
); );
} }

149
src/components/app-sidebar.tsx
View file

@ -2,9 +2,10 @@
import * as React from "react"; import * as React from "react";
import { Home, Map } from "lucide-react"; import { Home, Map } from "lucide-react";
import { NavUser } from "@/components/nav-user"; import { NavUser } from "@/components/nav-user";
import { Label } from "@/components/ui/label"; import { Avatar, AvatarImage } from "./ui/avatar";
import { useState, useEffect } from "react";
import { usePathname, useRouter } from "next/navigation";
import { import {
Sidebar, Sidebar,
SidebarContent, SidebarContent,
@ -18,11 +19,25 @@ import {
SidebarMenuItem, SidebarMenuItem,
useSidebar, useSidebar,
} from "@/components/ui/sidebar"; } from "@/components/ui/sidebar";
import { Switch } from "@/components/ui/switch"; import {
import { Avatar, AvatarImage } from "./ui/avatar"; Tooltip,
TooltipContent,
import { useState, useEffect } from "react"; TooltipTrigger,
import { usePathname, useRouter } from "next/navigation"; } from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";
import { XIcon } from "lucide-react";
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
const data = { const data = {
user: { user: {
@ -33,16 +48,27 @@ const data = {
navMain: [ navMain: [
{ {
title: "Dashboard", title: "Dashboard",
page: "dashboard",
url: "/dashboard", url: "/dashboard",
icon: Home, icon: Home,
isActive: true, isActive: true,
isVisible: true,
}, },
{ {
title: "Map", title: "Map",
page: "map",
url: "/map", url: "/map",
icon: Map, icon: Map,
isActive: false, isActive: false,
isVisible: true,
}, },
{
title: "Dettaglio cliente",
page: "client",
url: "/client",
icon: Home,
isVisible: false,
}
], ],
clienti: [ clienti: [
{ {
@ -129,6 +155,10 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
setClientPathname(pathname); setClientPathname(pathname);
}, [pathname]); }, [pathname]);
useEffect(() => {
console.log();
}, [clientPathname]);
return ( return (
<Sidebar <Sidebar
collapsible="icon" collapsible="icon"
@ -136,9 +166,6 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
variant="inset" variant="inset"
{...props} {...props}
> >
{/* This is the first sidebar */}
{/* We disable collapsible and adjust width to icon. */}
{/* This will make the sidebar appear as icons. */}
<Sidebar <Sidebar
collapsible="none" collapsible="none"
className="w-[calc(var(--sidebar-width-icon)+1px)]! border-r" className="w-[calc(var(--sidebar-width-icon)+1px)]! border-r"
@ -175,7 +202,11 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
<SidebarGroup> <SidebarGroup>
<SidebarGroupContent className="px-1.5 md:px-0"> <SidebarGroupContent className="px-1.5 md:px-0">
<SidebarMenu> <SidebarMenu>
{data.navMain.map((item) => ( {data.navMain.map((item) => {
if (!item.isVisible) {
return;
}
return (
<SidebarMenuItem key={item.title}> <SidebarMenuItem key={item.title}>
<SidebarMenuButton <SidebarMenuButton
tooltip={{ tooltip={{
@ -204,7 +235,8 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
<span>{item.title}</span> <span>{item.title}</span>
</SidebarMenuButton> </SidebarMenuButton>
</SidebarMenuItem> </SidebarMenuItem>
))} );
})}
</SidebarMenu> </SidebarMenu>
</SidebarGroupContent> </SidebarGroupContent>
</SidebarGroup> </SidebarGroup>
@ -214,8 +246,6 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
</SidebarFooter> </SidebarFooter>
</Sidebar> </Sidebar>
{/* This is the second sidebar */}
{/* We disable collapsible and let it fill remaining space */}
<Sidebar collapsible="none" className="hidden flex-1 md:flex"> <Sidebar collapsible="none" className="hidden flex-1 md:flex">
<SidebarHeader className="gap-3.5 border-b p-4"> <SidebarHeader className="gap-3.5 border-b p-4">
<div className="flex w-full items-center justify-between"> <div className="flex w-full items-center justify-between">
@ -225,22 +255,93 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
: data.navMain.find((entry) => entry.url == clientPathname) : data.navMain.find((entry) => entry.url == clientPathname)
?.title} ?.title}
</div> </div>
{/*<Label className="flex items-center gap-2 text-sm">
<span>Unreads</span>
<Switch className="shadow-none" />
</Label>*/}
</div> </div>
<SidebarInput placeholder="Type to search..." /> <div className="flex flex-row max-h-max gap-2">
<SidebarInput placeholder="Digita per cercare..." className="h-full" />
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline" onClick={() => {
if (clientPathname.split("/")[1] == "map") {
router.replace('/map', undefined);
}
}}>
<XIcon className="size-4" />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Resetta ricerca</p>
</TooltipContent>
</Tooltip>
</div>
<div>
<Dialog>
<form className="z-10">
<DialogTrigger asChild>
<Button variant="outline">Aggiungi cliente</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>Aggiungi cliente</DialogTitle>
{/*<DialogDescription>
Make changes to your profile here. Click save when you&apos;re
done.
</DialogDescription>*/}
</DialogHeader>
<div className="grid gap-4">
<div className="grid gap-3">
<Label htmlFor="name">Nome</Label>
<Input id="name" name="name" placeholder="Nome" />
</div>
<div className="grid gap-3">
<Label htmlFor="ragione_sociale">Ragione sociale</Label>
<Input id="ragione_sociale" name="ragione_sociale" placeholder="Ragione sociale" />
</div>
<div className="grid gap-3">
<Label htmlFor="p_iva">Partita IVA</Label>
<Input id="p_iva" name="p_iva" placeholder="Partita IVA" />
</div>
<div className="grid gap-3">
<Label htmlFor="tel">Numero di telefono</Label>
<Input id="tel" name="tel" placeholder="Numero di telefono" />
</div>
<div className="grid gap-3">
<Label htmlFor="sede_desc">Sede (descrizione)</Label>
<Input id="sede_desc" name="sede_desc" placeholder="Sede - descrizione" />
</div>
<div className="grid gap-3">
<Label htmlFor="sede_link">Sede (link GMaps)</Label>
<Input id="sede_link" name="sede_link" placeholder="Sede - link" />
</div>
<div className="grid gap-3">
<Label htmlFor="contratto">Contratto (link)</Label>
<Input id="contratto" name="contratto" placeholder="Contratto - link" />
</div>
</div>
<DialogFooter>
<DialogClose asChild>
<Button variant="outline">Cancella</Button>
</DialogClose>
<Button type="submit">Aggiungi</Button>
</DialogFooter>
</DialogContent>
</form>
</Dialog>
</div>
</SidebarHeader> </SidebarHeader>
<SidebarContent> <SidebarContent>
<SidebarGroup className="px-0"> <SidebarGroup className="px-0">
<SidebarGroupContent className=""> <SidebarGroupContent className="">
{clienti.map((cliente) => ( {clienti.map((cliente) => (
<a <span
href="#" onClick={() => {
onClick={() => router.push(`/client/${cliente.name}`)} let path = clientPathname.split("/")[1];
if (path == "dashboard") {
path = "client"
}
router.push(`/${path}?client=${cliente.name}`)
}}
key={cliente.name} key={cliente.name}
className="w-11/12 mx-auto rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0" className="hover:cursor-pointer w-11/12 mx-auto rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0"
> >
<span className="font-medium">{cliente.name}</span> <span className="font-medium">{cliente.name}</span>
<div className="flex w-full items-center gap-2"> <div className="flex w-full items-center gap-2">
@ -249,7 +350,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
<span className="line-clamp-2 w-[260px] text-xs whitespace-break-spaces"> <span className="line-clamp-2 w-[260px] text-xs whitespace-break-spaces">
{cliente.registratori[0].prossima_verifica} {cliente.registratori[0].prossima_verifica}
</span> </span>
</a> </span>
))} ))}
</SidebarGroupContent> </SidebarGroupContent>
</SidebarGroup> </SidebarGroup>

5
src/components/device-card.tsx
View file

@ -24,7 +24,7 @@ import { Button } from "@/components/ui/button";
import { Edit, Plus } from "lucide-react"; import { Edit, Plus } from "lucide-react";
import { Checkbox } from "@/components/ui/checkbox"; import { Checkbox } from "@/components/ui/checkbox";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { useParams } from "next/navigation"; import { useSearchParams } from "next/navigation";
type Invervento = { type Invervento = {
id: string, id: string,
@ -54,7 +54,8 @@ type Cliente = {
} }
const DeviceCard = ({clienti}: {clienti:Array<Cliente>}) => { const DeviceCard = ({clienti}: {clienti:Array<Cliente>}) => {
const { client } = useParams(); const searchParams = useSearchParams();
const client = searchParams.get("client");
return ( return (
<Card className="@container/card"> <Card className="@container/card">

82
src/components/map.tsx
View file

@ -1,27 +1,46 @@
import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet"; import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";
import { Icon } from "leaflet"; import { Icon } from "leaflet";
import "leaflet/dist/leaflet.css"; import "leaflet/dist/leaflet.css";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";
import { Map as MapIcon } from "lucide-react";
const Map = () => { const Map = ({highlight}: {highlight?: string}) => {
const positions = [ const positions = [
{ {
name: "Autogeneral", name: "Autogeneral",
position: [45.49285083101236, 10.15951437254693], position: [45.49285083101236, 10.15951437254693],
sede_url: "https://maps.app.goo.gl/9uNbw2a62ZCCjkQc7",
}, },
{ {
name: "Delizie e Sapori (Cuor di gelato)", name: "Delizie e Sapori (Cuor di gelato)",
position: [45.55425938252774, 10.227818585851844], position: [45.55425938252774, 10.227818585851844],
sede_url: "https://maps.app.goo.gl/9uNbw2a62ZCCjkQc7",
}, },
{ {
name: "Casa dell'Ottica di Zanotti Giulio", name: "Casa dell'Ottica di Zanotti Giulio",
position: [45.53644055688526, 10.222584658771389], position: [45.53644055688526, 10.222584658771389],
sede_url: "https://maps.app.goo.gl/9uNbw2a62ZCCjkQc7",
}, },
{ {
name: "Nuova Ottica", name: "Nuova Ottica",
position: [45.48257540298808, 10.23957216093029], position: [45.48257540298808, 10.23957216093029],
sede_url: "https://maps.app.goo.gl/9uNbw2a62ZCCjkQc7",
},
{
name: "Savoldi Ettore",
position: [45.486316837251415, 10.1737522099259],
sede_url: "https://maps.app.goo.gl/9uNbw2a62ZCCjkQc7",
}, },
]; ];
console.log(highlight);
console.log(positions.find((client) => client.name == highlight));
const customMarker = new Icon({ const customMarker = new Icon({
iconUrl: "marker-icon-red.png", iconUrl: "marker-icon-red.png",
iconAnchor: [10, 20], iconAnchor: [10, 20],
@ -30,31 +49,80 @@ const Map = () => {
return ( return (
<MapContainer <MapContainer
center={positions[0].position} center={highlight ? positions.find((client) => client.name == highlight)?.position : [45.54157745559809, 10.211896906975962]}
zoom={10} zoom={13}
scrollWheelZoom={true} scrollWheelZoom={true}
className="m-0 p-0 h-[99%] w-[99%] mx-[0.5%] my-[0.5%] rounded-md" className="m-0 p-0 h-[99%] w-[99%] mx-[0.5%] my-[0.5%] rounded-md z-0"
> >
<TileLayer <TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url={`https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`} url={`https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`}
/> />
{positions.map((client) => ( { highlight == null ? positions.map((client) => (
<Marker <Marker
position={client.position} position={client.position}
draggable={false} draggable={false}
animate={false} animate={false}
icon={customMarker} icon={customMarker}
> >
<Popup> <Popup className="">
<div className="flex flex-row gap-5">
<div>
<span className="block text-sm font-bold">{client.name}</span> <span className="block text-sm font-bold">{client.name}</span>
<div className="flex gap-2"> <div className="flex gap-2">
<span className="text-xs font-semibold">P.IVA</span> <span className="text-xs font-semibold">P.IVA</span>
<span className="text-xs">03417520172</span> <span className="text-xs">03417520172</span>
</div> </div>
</div>
<Tooltip>
<TooltipTrigger asChild>
<a href={client.sede_url} target="blank">
<Button variant="outline">
<MapIcon className="size-4" />
</Button>
</a>
</TooltipTrigger>
<TooltipContent>
<p>Resetta ricerca</p>
</TooltipContent>
</Tooltip>
</div>
</Popup> </Popup>
</Marker> </Marker>
))} )) :
<Marker
position={positions.find((client) => client.name == highlight)?.position}
draggable={false}
animate={false}
icon={customMarker}
>
<Popup className="">
<div className="flex flex-row gap-5">
<div>
<span className="block text-sm font-bold">{positions.find((client) => client.name == highlight)?.name}</span>
<div className="flex gap-2">
<span className="text-xs font-semibold">P.IVA</span>
<span className="text-xs">03417520172</span>
</div>
</div>
<Tooltip>
<TooltipTrigger asChild>
<a href={positions.find((client) => client.name == highlight)?.sede_url} target="blank">
<Button variant="outline">
<MapIcon className="size-4" />
</Button>
</a>
</TooltipTrigger>
<TooltipContent>
<p>Resetta ricerca</p>
</TooltipContent>
</Tooltip>
</div>
</Popup>
</Marker>
}
</MapContainer> </MapContainer>
); );
}; };

143
src/components/ui/dialog.tsx Normal file
View file

@ -0,0 +1,143 @@
"use client"
import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { XIcon } from "lucide-react"
import { cn } from "@/lib/utils"
function Dialog({
...props
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
return <DialogPrimitive.Root data-slot="dialog" {...props} />
}
function DialogTrigger({
...props
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
}
function DialogPortal({
...props
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
}
function DialogClose({
...props
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
}
function DialogOverlay({
className,
...props
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
return (
<DialogPrimitive.Overlay
data-slot="dialog-overlay"
className={cn(
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
className
)}
{...props}
/>
)
}
function DialogContent({
className,
children,
showCloseButton = true,
...props
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
showCloseButton?: boolean
}) {
return (
<DialogPortal data-slot="dialog-portal">
<DialogOverlay />
<DialogPrimitive.Content
data-slot="dialog-content"
className={cn(
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
className
)}
{...props}
>
{children}
{showCloseButton && (
<DialogPrimitive.Close
data-slot="dialog-close"
className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
>
<XIcon />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
)}
</DialogPrimitive.Content>
</DialogPortal>
)
}
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="dialog-header"
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
{...props}
/>
)
}
function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="dialog-footer"
className={cn(
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
className
)}
{...props}
/>
)
}
function DialogTitle({
className,
...props
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
return (
<DialogPrimitive.Title
data-slot="dialog-title"
className={cn("text-lg leading-none font-semibold", className)}
{...props}
/>
)
}
function DialogDescription({
className,
...props
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
return (
<DialogPrimitive.Description
data-slot="dialog-description"
className={cn("text-muted-foreground text-sm", className)}
{...props}
/>
)
}
export {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogOverlay,
DialogPortal,
DialogTitle,
DialogTrigger,
}