npm - @postxl/generators - Versions diffs - 0.2.2 - Mend

@postxl/generators 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1095) hide show

package/dist/frontend-core/template/public/silent-check-sso.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Silent Check SSO</title>
+  </head>
+  <body>
+    <script>
+      parent.postMessage(location.href, location.origin)
+    </script>
+  </body>
+</html>

package/dist/frontend-core/template/public/site.webmanifest ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

package/dist/frontend-core/template/src/components/ui/accordion/accordion.stories.tsx ADDED Viewed

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './accordion'
+const meta = {
+  title: 'Accordion',
+  component: Accordion,
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['single', 'multiple'],
+    },
+    collapsible: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof Accordion>
+export default meta
+export const Default: StoryObj<typeof meta> = {
+  args: {
+    type: 'single',
+    collapsible: true,
+  },
+  render: (args) => (
+    <div className="flex items-center justify-center border rounded p-4">
+      <Accordion {...args} className="w-full">
+        <AccordionItem value="item-1">
+          <AccordionTrigger>Is it accessible?</AccordionTrigger>
+          <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-2">
+          <AccordionTrigger>Is it styled?</AccordionTrigger>
+          <AccordionContent>
+            Yes. It comes with default styles that matches the other components&apos; aesthetic.
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-3">
+          <AccordionTrigger>Is it animated?</AccordionTrigger>
+          <AccordionContent>Yes. It's animated by default, but you can disable it if you prefer.</AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  ),
+}

package/dist/frontend-core/template/src/components/ui/accordion/accordion.tsx ADDED Viewed

@@ -0,0 +1,52 @@
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { ChevronDownIcon } from '@radix-ui/react-icons'
+import * as React from 'react'
+import { cn } from '@lib/utils'
+const Accordion = AccordionPrimitive.Root
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item ref={ref} className={cn('border-b', className)} {...props} />
+))
+AccordionItem.displayName = 'AccordionItem'
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex flex-1 items-center cursor-pointer justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn('pb-4 pt-0', className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/dist/frontend-core/template/src/components/ui/admin-sidebar/admin-sidebar.tsx ADDED Viewed

@@ -0,0 +1,195 @@
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons'
+import { useState } from 'react'
+export function AdminSidebar() {
+  const [isOpen, setIsOpen] = useState(false)
+  const [isCollapsed, setIsCollapsed] = useState(false)
+  const [expandedSchemas, setExpandedSchemas] = useState<Record<string, boolean>>({
+    Data: true,
+    PXL: true,
+    Advanced: true,
+  })
+  const toggleSchema = (schema: string) => {
+    setExpandedSchemas((prev) => ({
+      ...prev,
+      [schema]: !prev[schema],
+    }))
+  }
+  return (
+    <>
+      {/* Mobile toggle button */}
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="fixed top-4 left-4 z-50 md:hidden p-2 bg-white dark:bg-gray-900 rounded shadow-lg border border-gray-200 dark:border-gray-700"
+        aria-label="Toggle admin menu"
+      >
+        {isOpen ? <ChevronDownIcon className="w-6 h-6" /> : <ChevronRightIcon className="w-6 h-6" />}
+      </button>
+      {/* Sidebar */}
+      <aside
+        className={`
+          fixed md:sticky top-0 left-0 h-screen bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-700
+          overflow-y-auto transition-all duration-300 z-40
+          ${isOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'}
+          ${isCollapsed ? 'w-16  min-w-16' : 'w-64 min-w-64'}
+        `}
+      >
+        <div className="p-4">
+          <div className="flex items-center justify-between mb-4">
+            {!isCollapsed && (
+              <a
+                href="/admin"
+                className="text-lg font-bold hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+              >
+                Admin
+              </a>
+            )}
+            <button
+              onClick={() => setIsCollapsed(!isCollapsed)}
+              className="hidden md:block p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors ml-auto"
+              aria-label={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+            >
+              {isCollapsed ? <ChevronRightIcon className="w-5 h-5" /> : <ChevronLeftIcon className="w-5 h-5" />}
+            </button>
+          </div>
+          {!isCollapsed && (
+            <nav>
+              <div key="Data" className="mb-4">
+                <button
+                  onClick={() => toggleSchema('Data')}
+                  className="flex items-center justify-between w-full px-4 py-2 font-semibold text-left hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
+                >
+                  <span>Data</span>
+                  {expandedSchemas['Data'] ? (
+                    <ChevronDownIcon className="w-4 h-4" />
+                  ) : (
+                    <ChevronRightIcon className="w-4 h-4" />
+                  )}
+                </button>
+                {expandedSchemas['Data'] && (
+                  <ul className="mt-2 ml-2 space-y-1">
+                    <li key="Country">
+                      <a
+                        href="/admin/countries"
+                        className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
+                      >
+                        Country
+                      </a>
+                    </li>
+                    <li key="Post">
+                      <a
+                        href="/admin/posts"
+                        className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
+                      >
+                        Post
+                      </a>
+                    </li>
+                    <li key="Publication">
+                      <a
+                        href="/admin/publications"
+                        className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
+                      >
+                        Publication
+                      </a>
+                    </li>
+                    <li key="ViewStatistic">
+                      <Link
+                        href="/admin/viewStatistics"
+                        className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
+                      >
+                        ViewStatistic
+                      </Link>
+                    </li>
+                  </ul>
+                )}
+              </div>
+              <div key="PXL" className="mb-4">
+                <button
+                  onClick={() => toggleSchema('PXL')}
+                  className="flex items-center justify-between w-full px-4 py-2 font-semibold text-left hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
+                >
+                  <span>PXL</span>
+                  {expandedSchemas['PXL'] ? (
+                    <ChevronDownIcon className="w-4 h-4" />
+                  ) : (
+                    <ChevronRightIcon className="w-4 h-4" />
+                  )}
+                </button>
+                {expandedSchemas['PXL'] && (
+                  <ul className="mt-2 ml-2 space-y-1">
+                    <li key="Action">
+                      <a
+                        href="/admin/actions"
+                        className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
+                      >
+                        Action
+                      </a>
+                    </li>
+                    <li key="ActionOperation">
+                      <a
+                        href="/admin/actionOperations"
+                        className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
+                      >
+                        ActionOperation
+                      </a>
+                    </li>
+                    <li key="File">
+                      <a
+                        href="/admin/files"
+                        className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
+                      >
+                        File
+                      </a>
+                    </li>
+                    <li key="User">
+                      <a
+                        href="/admin/users"
+                        className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
+                      >
+                        User
+                      </a>
+                    </li>
+                  </ul>
+                )}
+              </div>
+              {process.env.NEXT_PUBLIC_ALLOW_ADMIN === 'true' && (
+                <div key="Advanced" className="mb-4">
+                  <button
+                    onClick={() => toggleSchema('Advanced')}
+                    className="flex items-center justify-between w-full px-4 py-2 font-semibold text-left hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
+                  >
+                    <span>Advanced</span>
+                    {expandedSchemas['Advanced'] ? (
+                      <ChevronDownIcon className="w-4 h-4" />
+                    ) : (
+                      <ChevronRightIcon className="w-4 h-4" />
+                    )}
+                  </button>
+                  {expandedSchemas['Advanced'] && (
+                    <ul className="mt-2 ml-2 space-y-1">
+                      <li key="DataManagement">
+                        <Link
+                          href="/admin/data-management"
+                          className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
+                        >
+                          Data Management
+                        </Link>
+                      </li>
+                    </ul>
+                  )}
+                </div>
+              )}
+            </nav>
+          )}
+        </div>
+      </aside>
+      {/* Overlay for mobile */}
+      {isOpen && <div className="fixed inset-0 bg-black/20 z-30 md:hidden" onClick={() => setIsOpen(false)} />}
+    </>
+  )
+}

package/dist/frontend-core/template/src/components/ui/alert/alert.stories.tsx ADDED Viewed

@@ -0,0 +1,61 @@
+import { Meta, StoryObj } from '@storybook/react-vite'
+import { Alert, AlertDescription, AlertTitle } from './alert'
+import { RocketIcon, ExclamationTriangleIcon } from '@radix-ui/react-icons'
+const meta = {
+  title: 'Alert',
+  component: Alert,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      options: ['default', 'destructive'],
+    },
+  },
+} satisfies Meta<typeof Alert>
+export default meta
+export const Default: StoryObj<typeof meta> = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'The Alert component is used to display a message to the user.',
+      },
+    },
+  },
+  args: {
+    variant: 'default',
+  },
+  render: (args) => (
+    <div className="flex items-center justify-center border rounded p-4">
+      <Alert {...args}>
+        <RocketIcon className="h-4 w-4" />
+        <AlertTitle>Heads up!</AlertTitle>
+        <AlertDescription>You can add components to your app using the cli.</AlertDescription>
+      </Alert>
+    </div>
+  ),
+}
+export const Destructive: StoryObj<typeof meta> = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'The destructive variant is used for critical alerts that require immediate attention.',
+      },
+    },
+  },
+  args: {
+    variant: 'destructive',
+  },
+  render: (args) => (
+    <div className="flex items-center justify-center border rounded p-4">
+      <Alert {...args}>
+        <ExclamationTriangleIcon className="h-4 w-4" />
+        <AlertTitle>Error!</AlertTitle>
+        <AlertDescription>Something went wrong. Please try again.</AlertDescription>
+      </Alert>
+    </div>
+  ),
+}

package/dist/frontend-core/template/src/components/ui/alert/alert.tsx ADDED Viewed

@@ -0,0 +1,45 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
+import { cn } from '@lib/utils'
+const alertVariants = cva(
+  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground',
+        destructive: 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+))
+Alert.displayName = 'Alert'
+const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, children, ...props }, ref) => (
+    <h5 ref={ref} className={cn('mb-1 font-medium leading-none tracking-tight', className)} {...props}>
+      {children}
+    </h5>
+  ),
+)
+AlertTitle.displayName = 'AlertTitle'
+const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />
+  ),
+)
+AlertDescription.displayName = 'AlertDescription'
+export { Alert, AlertTitle, AlertDescription }

package/dist/frontend-core/template/src/components/ui/alert-dialog/alert-dialog.stories.tsx ADDED Viewed

@@ -0,0 +1,52 @@
+import { Meta, StoryObj } from '@storybook/react-vite'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from './alert-dialog'
+const meta = {
+  title: 'AlertDialog',
+  component: AlertDialog,
+  tags: ['autodocs'],
+} satisfies Meta<typeof AlertDialog>
+export default meta
+export const Default: StoryObj<typeof meta> = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The alert-dialog is a modal dialog that alerts the user of a situation that requires their attention and provides actions to address the situation.',
+      },
+    },
+  },
+  render: () => (
+    <div className="flex items-center justify-center">
+      <AlertDialog>
+        <AlertDialogTrigger>Open</AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This action cannot be undone. This will permanently delete your account and remove your data from our
+              servers.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction>Continue</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  ),
+}

package/dist/frontend-core/template/src/components/ui/alert-dialog/alert-dialog.tsx ADDED Viewed

@@ -0,0 +1,105 @@
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+import * as React from 'react'
+import { buttonVariants } from '@components/ui/button/button'
+import { cn } from '@lib/utils'
+const AlertDialog = AlertDialogPrimitive.Root
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    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}
+    ref={ref}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
+)
+AlertDialogHeader.displayName = 'AlertDialogHeader'
+const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
+)
+AlertDialogFooter.displayName = 'AlertDialogFooter'
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title ref={ref} className={cn('text-lg font-semibold', className)} {...props} />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+))
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}

package/dist/frontend-core/template/src/components/ui/avatar/avatar.stories.tsx ADDED Viewed

@@ -0,0 +1,30 @@
+import { Meta, StoryObj } from '@storybook/react-vite'
+import { Avatar, AvatarFallback, AvatarImage } from './avatar'
+const meta = {
+  title: 'Avatar',
+  component: Avatar,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Avatar>
+export default meta
+export const Default: StoryObj<typeof meta> = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The Avatar component is used to represent a user or entity. It can contain an image or fallback to initials.',
+      },
+    },
+  },
+  render: () => (
+    <div className="flex items-center justify-center">
+      <Avatar>
+        <AvatarImage src="https://github.com/shadcn.png" />
+        <AvatarFallback>CN</AvatarFallback>
+      </Avatar>
+    </div>
+  ),
+}

package/dist/frontend-core/template/src/components/ui/avatar/avatar.tsx ADDED Viewed

@@ -0,0 +1,39 @@
+import * as AvatarPrimitive from '@radix-ui/react-avatar'
+import * as React from 'react'
+import { cn } from '@lib/utils'
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image ref={ref} className={cn('aspect-square h-full w-full', className)} {...props} />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className)}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+export { Avatar, AvatarImage, AvatarFallback }