eai-frontend-components 2.0.4

package/src/components/ui/custom/table/data-table.tsx

@@ -0,0 +1,285 @@
+import {
+	ColumnDef,
+	PaginationState,
+	SortingState,
+	getCoreRowModel,
+	getFilteredRowModel,
+	getPaginationRowModel,
+	getSortedRowModel,
+	useReactTable,
+} from '@tanstack/react-table';
+import { Filter, Search } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { cn } from '../../../../lib/utils';
+import { Button } from '../../button';
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '../../sheet';
+import { Table, TableBody } from '../../table';
+import { DataTableFooter } from './data-table-footer';
+import { DataTableHeader } from './data-table-header';
+import { DataTableRows } from './data-table-rows';
+import { ActionRow, ActionTable, ExportDataTable, FiltersActions } from './types/data-table';
+
+export interface DataTableProps<TData> {
+	columns: ColumnDef<TData>[];
+	data: TData[];
+	actions?: ActionTable[];
+	actionsRow?: ActionRow[];
+	customFilters?: JSX.Element;
+	className?: string;
+	title?: string;
+	rowsPage?: number;
+	setSearch?: (value?: string) => void;
+	setSelectRows?: (ids: string[]) => void;
+	pageChanged?: (pageNumber: number) => void;
+	pageSizeChanged?: (pageSize: number) => void;
+	totalRows?: number;
+	filtersActions?: FiltersActions;
+	exportData?: ExportDataTable;
+	textNoRecords?: string;
+	heightRemainingScroll?: number;
+	hideFilterField?: boolean;
+	multiRowSelection?: {
+		callback: (selectedRows: any[]) => void;
+	};
+	hidePagination?: boolean;
+	disablePagination?: boolean;
+	isLoading?: boolean;
+	fixedHeight?: number;
+}
+
+export interface OriginalDataTableData {
+	id: string;
+	checked?: boolean;
+}
+
+export function DataTable<TData>({
+	columns,
+	data,
+	className,
+	title,
+	rowsPage,
+	actions,
+	actionsRow,
+	customFilters,
+	setSearch,
+	pageChanged,
+	pageSizeChanged,
+	totalRows,
+	filtersActions,
+	exportData,
+	textNoRecords,
+	heightRemainingScroll,
+	hideFilterField,
+	multiRowSelection,
+	hidePagination,
+	disablePagination,
+	isLoading,
+	fixedHeight,
+}: DataTableProps<TData>) {
+	const [sorting, setSorting] = useState<SortingState>([]);
+	const [pagination, setPagination] = useState<PaginationState>({
+		pageIndex: 0,
+		pageSize: rowsPage ?? 25,
+	});
+	const enableMultiRowSelection = multiRowSelection !== undefined;
+	const [rowSelection, setRowSelection] = useState(
+		enableMultiRowSelection
+			? Object.fromEntries(
+					(Array.isArray(data) ? data : []).map((row: any, idx: number) => {
+						return [idx, row.checked];
+					}),
+			  )
+			: {},
+	);
+	const debounceTimeout = useRef<NodeJS.Timeout | null>(null);
+	const tableContainerRef = useRef<HTMLDivElement>(null);
+	const [tableHeight, setTableHeight] = useState('auto');
+	totalRows = totalRows ?? data.length;
+
+	const table = useReactTable({
+		manualPagination: true,
+		data: data,
+		columns,
+		getPaginationRowModel: getPaginationRowModel(),
+		onPaginationChange: setPagination,
+		getCoreRowModel: getCoreRowModel(),
+		onSortingChange: setSorting,
+		getSortedRowModel: getSortedRowModel(),
+		getFilteredRowModel: getFilteredRowModel(),
+		onRowSelectionChange: (rowSelection) => {
+			setRowSelection(rowSelection);
+		},
+		enableMultiRowSelection: enableMultiRowSelection,
+		state: { pagination, rowSelection, sorting },
+		pageCount: Math.ceil(totalRows / pagination.pageSize),
+	});
+
+	const totalPages = table.getPageCount();
+	const currentPage = table.getState().pagination.pageIndex;
+	const selectedRows = table.getSelectedRowModel().rows;
+	const selectedIds = selectedRows.map((row) => (row.original as OriginalDataTableData).id);
+
+	useEffect(() => {
+		if (data.length === 0 && pagination.pageIndex > 0) {
+			setPagination({ ...pagination, pageIndex: 0 });
+		}
+	}, [data]);
+
+	useEffect(() => {
+		handleResize();
+
+		window.addEventListener('resize', handleResize);
+		return () => {
+			window.removeEventListener('resize', handleResize);
+		};
+	}, []);
+
+	useEffect(() => {
+		if (pageChanged) pageChanged(pagination.pageIndex + 1);
+	}, [pagination]);
+
+	useEffect(() => {
+		const selectedRowsChecked = selectedRows.map((row) => row.original);
+		if (multiRowSelection && selectedRowsChecked.length > 0) {
+			multiRowSelection.callback(selectedRowsChecked);
+		}
+	}, [rowSelection]);
+
+	const handleResize = () => {
+		if (tableContainerRef.current) {
+			const newHeight = window.innerHeight - tableContainerRef.current.getBoundingClientRect().top - (hidePagination ? 30 : 74);
+
+			setTableHeight(`${newHeight - (heightRemainingScroll ?? 0)}px`);
+		}
+	};
+
+	const handleSearchChange = (event: React.KeyboardEvent<HTMLInputElement>) => {
+		const value = event.currentTarget.value;
+
+		if (debounceTimeout.current) {
+			clearTimeout(debounceTimeout.current);
+		}
+
+		debounceTimeout.current = setTimeout(() => {
+			setSearch?.(value);
+			handlePage(0);
+		}, 300);
+	};
+
+	const handlePageSize = (value: number) => {
+		pageSizeChanged?.(value);
+		setPagination({ pageIndex: 0, pageSize: value });
+	};
+
+	const handlePage = (index: number) => {
+		if (index !== currentPage) {
+			setPagination({ ...pagination, pageIndex: index });
+		}
+	};
+
+	return (
+		<div className='flex flex-col flex-1'>
+			{(!hideFilterField || filtersActions || customFilters || actions) && (
+				<div className='flex items-end justify-between mb-4 space-x-6'>
+					<div className='flex items-center gap-x-4'>
+						{!hideFilterField && (
+							<div className='flex bg-background items-center border border-slate-300 rounded-sm w-[350px] overflow-hidden focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 group'>
+								<div className='pl-3.5 transform transition-transform duration-300 group-hover:-translate-x-1'>
+									<Search size={18} className='w-5 h-5 stroke-zinc-500 dark:stroke-default' />
+								</div>
+
+								<input
+									placeholder='Buscar'
+									onKeyUp={(event) => {
+										handleSearchChange(event);
+									}}
+									className='w-full bg-background text-default border-none focus:ring-0 focus:outline-none px-3 py-2 transform transition-transform duration-300 group-hover:-translate-x-1 '
+								/>
+							</div>
+						)}
+						{filtersActions && (
+							<Sheet open={filtersActions.filterOpen} onOpenChange={filtersActions.setFilterOpen}>
+								<SheetTrigger asChild>
+									<Button variant='secondary' type='button'>
+										<Filter size={20} className='h-4 w-4' /> Filtros
+										{filtersActions.countFilters > 0 && (
+											<div className='bg-background-primary text-white rounded-full h-5 w-5 flex items-center justify-center text-sm placeholder:text-muted-foreground'>
+												{filtersActions.countFilters}
+											</div>
+										)}
+									</Button>
+								</SheetTrigger>
+								<SheetContent>
+									<SheetHeader>
+										<SheetTitle>Filtros</SheetTitle>
+										<SheetDescription />
+									</SheetHeader>
+									<div className='flex flex-col py-6'>{filtersActions.fields}</div>
+								</SheetContent>
+							</Sheet>
+						)}
+					</div>
+					{customFilters}
+					<div className='flex space-x-4 content-end'>
+						{actions?.map((action, index) => (
+							<div key={`action-table-${index}`}>
+								<Button
+									onClick={() => action.onClick?.(selectedIds, selectedRows)}
+									className={cn(action.className, action.hideUnselectedRows && selectedRows.length === 0 ? 'hidden' : '')}
+									variant={(action.variant as 'link' | 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost') || 'default'}
+									disabled={action.disabled}
+								>
+									<div className='[&_svg]:size-5'>{action.icon}</div>
+									{action.label}
+								</Button>
+							</div>
+						))}
+					</div>
+				</div>
+			)}
+
+			<div className={`flex-1 flex flex-col rounded-md border ${className}`}>
+				<div className='flex items-center justify-between'>{title && <div className='text-h4 p-4'>{title}</div>}</div>
+				<div
+					id='data-table'
+					ref={tableContainerRef}
+					style={fixedHeight ? { height: fixedHeight } : { height: tableHeight }}
+					className='flex flex-col justify-between rounded-md overflow-x-auto overflow-y-auto'
+				>
+					<Table>
+						<DataTableHeader
+							table={table}
+							canActionsRow={actionsRow && actionsRow.length > 0}
+							enableMultiRowSelection={enableMultiRowSelection}
+						/>
+						<TableBody className='bg-background'>
+							<DataTableRows
+								table={table}
+								columns={columns}
+								isLoading={isLoading}
+								actionsRow={actionsRow}
+								textNoRecords={textNoRecords}
+								enableMultiRowSelection={enableMultiRowSelection}
+							/>
+						</TableBody>
+					</Table>
+				</div>
+			</div>
+
+			<DataTableFooter
+				hidePagination={hidePagination}
+				disablePagination={disablePagination}
+				isLoading={isLoading}
+				totalRows={totalRows}
+				totalPages={totalPages}
+				currentPage={currentPage}
+				pagination={pagination}
+				handlePageSize={handlePageSize}
+				handlePage={handlePage}
+				previousPage={{ action: () => table.previousPage(), disabled: !table.getCanPreviousPage() }}
+				nextPage={{ action: () => table.nextPage(), disabled: !table.getCanNextPage() }}
+				exportData={exportData}
+			/>
+		</div>
+	);
+}

package/src/components/ui/custom/table/types/data-table.ts

@@ -0,0 +1,31 @@
+export type ActionTable = {
+	label: string;
+	icon?: JSX.Element;
+	variant?: string;
+	onClick?: (ids: any[], rows: any[]) => void;
+	className?: string;
+	hideUnselectedRows?: boolean;
+	disabled?: boolean;
+};
+
+export type ActionRow = {
+	label: string;
+	icon?: JSX.Element;
+	variant?: string;
+	onClick?: (row: any) => void;
+	className?: (row: any) => string;
+	disabled?: (row: any) => boolean;
+};
+
+export interface ExportDataTable {
+	type: 'xlsx' | 'dialog';
+	url: string;
+	params?: Record<string, string>;
+}
+
+export interface FiltersActions {
+	fields: JSX.Element;
+	countFilters: number;
+	filterOpen: boolean;
+	setFilterOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}

package/src/components/ui/custom/theme-provider.tsx

@@ -0,0 +1,121 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+import { replaceThemeTailwindColors } from '../../../lib/help/theme';
+
+type Theme = 'light' | 'dark' | 'dark-side';
+
+type PortalDefinitions = {
+	faviconPath: string;
+	fullLogoPath: string;
+	bannerDesktopPath: string;
+	mvnoPrimaryColor: string;
+	mvnoMainTheme: Theme;
+	title: string;
+	hideModuleSwitcher: boolean;
+};
+
+type ThemeProviderProps = {
+	children: React.ReactNode;
+	defaultTheme?: PortalDefinitions;
+	storageKey?: string;
+};
+
+type ThemeProviderState = {
+	portalDefinitions: PortalDefinitions;
+	setPortalDefinitions: (portalDefinitions: PortalDefinitions) => void;
+};
+
+export const DEFAULT_THEME_DATA: PortalDefinitions = {
+	faviconPath: '/logos/logosEai/Eai_roxo_48x48px.png',
+	fullLogoPath: '/logos/logosEai/Eai_Roxo_60x42px.png',
+	bannerDesktopPath: '/imgs/background-auth.png',
+	mvnoPrimaryColor: 'violet',
+	mvnoMainTheme: 'light',
+	title: 'Eaí',
+	hideModuleSwitcher: false,
+};
+
+const initialState: ThemeProviderState = {
+	portalDefinitions: DEFAULT_THEME_DATA,
+	setPortalDefinitions: () => null,
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+export function ThemeProvider({ children, defaultTheme = DEFAULT_THEME_DATA, storageKey = 'vite-ui-theme', ...props }: ThemeProviderProps) {
+	const [portalDefinitions, setPortalDefinitionsState] = useState<PortalDefinitions>({
+		faviconPath: localStorage.getItem(`${storageKey}-faviconPath`) || defaultTheme.faviconPath,
+		fullLogoPath: localStorage.getItem(`${storageKey}-fullLogoPath`) || defaultTheme.fullLogoPath,
+		bannerDesktopPath: localStorage.getItem(`${storageKey}-bannerDesktopPath`) || defaultTheme.bannerDesktopPath,
+		mvnoPrimaryColor: localStorage.getItem(`${storageKey}-mvnoPrimaryColor`) || defaultTheme.mvnoPrimaryColor,
+		mvnoMainTheme: (localStorage.getItem(storageKey) as Theme) || defaultTheme.mvnoMainTheme,
+		title: localStorage.getItem(`${storageKey}-title`) || defaultTheme.title,
+		hideModuleSwitcher: localStorage.getItem(`${storageKey}-hideModuleSwitcher`) === 'true',
+	});
+
+	useEffect(() => {
+		const theme = portalDefinitions?.mvnoMainTheme;
+
+		const root = window.document.documentElement;
+		root.classList.remove('light', 'dark', 'dark-side');
+		root.classList.add(theme);
+
+		document.title = portalDefinitions?.title;
+		const meta = document.querySelector('meta[name="description"]');
+		if (meta) {
+			meta.setAttribute('content', portalDefinitions?.title);
+		}
+
+		let link = document.querySelector<HTMLLinkElement>("link[rel~='icon']");
+		if (!link) {
+			link = document.createElement('link');
+			link.rel = 'icon';
+			document.getElementsByTagName('head')[0].appendChild(link);
+		}
+		link.href = portalDefinitions?.faviconPath;
+
+		const el = replaceThemeTailwindColors(theme, portalDefinitions?.mvnoPrimaryColor);
+
+		document.getElementById('theme-variables') &&
+			document.getElementsByTagName('head')[0].removeChild(document.getElementById('theme-variables')!);
+		document.getElementsByTagName('head')[0].appendChild(el);
+	}, [portalDefinitions]);
+
+	const setPortalDefinitions = (portalDefinitions: PortalDefinitions) => {
+		localStorage.setItem(`${storageKey}-faviconPath`, portalDefinitions.faviconPath);
+		localStorage.setItem(`${storageKey}-fullLogoPath`, portalDefinitions.fullLogoPath);
+		localStorage.setItem(`${storageKey}-bannerDesktopPath`, portalDefinitions.bannerDesktopPath);
+		localStorage.setItem(`${storageKey}-mvnoPrimaryColor`, portalDefinitions.mvnoPrimaryColor);
+		localStorage.setItem(`${storageKey}-mvnoMainTheme`, portalDefinitions.mvnoMainTheme);
+		localStorage.setItem(`${storageKey}-title`, portalDefinitions.title);
+		localStorage.setItem(`${storageKey}-hideModuleSwitcher`, String(portalDefinitions.hideModuleSwitcher));
+
+		setPortalDefinitionsState({
+			faviconPath: portalDefinitions.faviconPath || DEFAULT_THEME_DATA.faviconPath,
+			fullLogoPath: portalDefinitions.fullLogoPath || DEFAULT_THEME_DATA.fullLogoPath,
+			bannerDesktopPath: portalDefinitions.bannerDesktopPath || DEFAULT_THEME_DATA.bannerDesktopPath,
+			mvnoPrimaryColor: portalDefinitions.mvnoPrimaryColor || DEFAULT_THEME_DATA.mvnoPrimaryColor,
+			mvnoMainTheme: portalDefinitions.mvnoMainTheme ? (portalDefinitions.mvnoMainTheme as Theme) : DEFAULT_THEME_DATA.mvnoMainTheme,
+			title: portalDefinitions.title || DEFAULT_THEME_DATA.title,
+			hideModuleSwitcher: portalDefinitions.hideModuleSwitcher || DEFAULT_THEME_DATA.hideModuleSwitcher,
+		});
+	};
+
+	const value: ThemeProviderState = {
+		portalDefinitions,
+		setPortalDefinitions: setPortalDefinitions,
+	};
+
+	return (
+		<ThemeProviderContext.Provider {...props} value={value}>
+			{children}
+		</ThemeProviderContext.Provider>
+	);
+}
+
+export const useTheme = () => {
+	const context = useContext(ThemeProviderContext);
+
+	if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider');
+
+	return context;
+};

package/src/components/ui/dateRangePicker.tsx

@@ -0,0 +1,63 @@
+import { addDays, format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
+import * as React from "react"
+import { DateRange } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { Button } from "./button"
+import { Calendar } from "./calendar"
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "./popover"
+
+export function DatePickerWithRange({
+  className,
+}: React.HTMLAttributes<HTMLDivElement>) {
+  const [date, setDate] = React.useState<DateRange | undefined>({
+    from: new Date(2022, 0, 20),
+    to: addDays(new Date(2022, 0, 20), 20),
+  })
+
+  return (
+    <div className={cn("grid gap-2", className)}>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            id="date"
+            variant={"outline"}
+            className={cn(
+              "w-[300px] justify-start text-left font-normal",
+              !date && "text-muted-foreground"
+            )}
+          >
+            <CalendarIcon />
+            {date?.from ? (
+              date.to ? (
+                <>
+                  {format(date.from, "LLL dd, y")} -{" "}
+                  {format(date.to, "LLL dd, y")}
+                </>
+              ) : (
+                format(date.from, "LLL dd, y")
+              )
+            ) : (
+              <span>Pick a date</span>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            initialFocus
+            mode="range"
+            defaultMonth={date?.from}
+            selected={date}
+            onSelect={setDate}
+            numberOfMonths={2}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}

package/src/components/ui/dialog.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+	React.ElementRef<typeof DialogPrimitive.Overlay>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+	<DialogPrimitive.Overlay
+		ref={ref}
+		className={cn(
+			'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+			className,
+		)}
+		{...props}
+	/>
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+	hideClose?: boolean;
+}
+
+const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Content>, DialogContentProps>(
+	({ className, children, hideClose, ...props }, ref) => (
+		<DialogPortal>
+			<DialogOverlay />
+			<DialogPrimitive.Content
+				ref={ref}
+				className={cn(
+					'fixed left-[50%] top-[50%] z-50 grid translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				{!hideClose && (
+					<DialogPrimitive.Close className='absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground'>
+						<X className='h-4 w-4' />
+						<span className='sr-only'>Close</span>
+					</DialogPrimitive.Close>
+				)}
+			</DialogPrimitive.Content>
+		</DialogPortal>
+	),
+);
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+	<div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+	<div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Title>, React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>>(
+	({ className, ...props }, ref) => (
+		<DialogPrimitive.Title ref={ref} className={cn('text-lg font-semibold leading-none tracking-tight', className)} {...props} />
+	),
+);
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+	React.ElementRef<typeof DialogPrimitive.Description>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => <DialogPrimitive.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />);
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };
+

package/src/components/ui/drawer.tsx

@@ -0,0 +1,116 @@
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils"
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+)
+Drawer.displayName = "Drawer"
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+
+const DrawerPortal = DrawerPrimitive.Portal
+
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props}
+  />
+))
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+))
+DrawerContent.displayName = "DrawerContent"
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    {...props}
+  />
+)
+DrawerHeader.displayName = "DrawerHeader"
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    {...props}
+  />
+)
+DrawerFooter.displayName = "DrawerFooter"
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}