@devvistatech/devvista-kit 0.0.1

package/components/navBars/navbar.tsx

@@ -0,0 +1,311 @@
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+import { cn } from "@/lib/utils";
+import { usePathname } from "next/navigation";
+import { useState, useRef, useEffect } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Facebook } from "lucide-react";
+
+const Navbar = () => {
+  const pathname = usePathname();
+  const [isOpen, setIsOpen] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const menuRef = useRef(null);
+
+  const leftLinks = [
+    { href: "/", label: "Home" },
+    { href: "/about", label: "About" },
+    { href: "/contact", label: "Contact" },
+  ];
+
+  const rightLinks = [
+    { href: "/gallery", label: "Gallery" },
+    { href: "/schedule", label: "Schedule & Rates" },
+    //test
+  ];
+
+  const mobileLinks = [
+    ...leftLinks,
+    ...rightLinks,
+    { href: "/faq", label: "FAQ" },
+  ];
+
+  const menuVariants = {
+    closed: { x: "100%" },
+    open: {
+      x: 0,
+      transition: { type: "spring", stiffness: 100, damping: 20 },
+    },
+  };
+
+  const hamburgerLine = `h-1 w-8 transition-all duration-300 ease-in-out`;
+
+  useEffect(() => {
+    const handleModalStateChange = (e: Event) => {
+      const customEvent = e as CustomEvent<{ isOpen: boolean }>;
+      setIsModalOpen(customEvent.detail.isOpen);
+    };
+
+    window.addEventListener("modalStateChange", handleModalStateChange);
+
+    return () => {
+      window.removeEventListener("modalStateChange", handleModalStateChange);
+    };
+  }, []);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        menuRef.current &&
+        !(menuRef.current as HTMLElement).contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen]);
+
+  return (
+    <nav
+      className="fixed top-0 z-[1100] w-full bg-[#2D2D2D]/80 border-b-2 border-gray-800/50 shadow-lg py-6 transition-transform duration-300 ease-in-out"
+      style={{
+        transform: isModalOpen && !isOpen ? "translateY(-100%)" : "translateY(0)",
+      }}
+    >
+      <style jsx>{`
+        @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap");
+
+        :root {
+          --jubilee: #F47C7C;
+          --natural-white: #F7F7F7;
+          --caviar: #2D2D2D;
+          --storm-cloud: #4A636E;
+          --exuberant-blue: #FF69B4;
+        }
+
+        * {
+          font-family: "Inter", sans-serif;
+        }
+
+        .gradient-text {
+          background: linear-gradient(90deg, var(--jubilee), --exuberant-blue));
+          -webkit-background-clip: text;
+          background-clip: text;
+          color: transparent;
+        }
+
+        @media (max-width: 360px) {
+          .mobile-menu-link {
+            font-size: 1.25rem;
+          }
+          .mobile-menu-button {
+            font-size: 1rem;
+            padding: 0.5rem 1rem;
+          }
+        }
+      `}</style>
+
+      <div className="w-full px-8 relative">
+        {/* Desktop View */}
+        <div className="hidden 2xl:flex h-28 items-center justify-center gap-8">
+          <div className="flex items-center space-x-4">
+            {leftLinks.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                className={cn(
+                  "relative text-xl sm:text-2xl font-extrabold uppercase tracking-wider transition-all duration-300 px-4",
+                  pathname === link.href
+                    ? "text-white"
+                    : "text-gray-300 hover:text-blue-400 hover:scale-105",
+                  "after:content-[''] after:absolute after:bottom-[-8px] after:left-0 after:h-1 after:bg-blue-500 after:transition-all after:duration-300",
+                  pathname === link.href
+                    ? "after:w-full"
+                    : "after:w-0 hover:after:w-full"
+                )}
+              >
+                {link.label}
+              </Link>
+            ))}
+          </div>
+
+          <Link href="/" className="flex items-center relative group">
+            <Image
+              src="/images/FitStop.png"
+              alt="DevVista Kit Logo"
+              width={192}
+              height={192}
+              className="h-40 w-40 rounded-full transition-transform group-hover:scale-110 shadow-2xl"
+            />
+            <div className="absolute -inset-4 bg-blue-500/30 rounded-full blur-2xl opacity-0 group-hover:opacity-100 transition-opacity" />
+          </Link>
+
+          <div className="flex items-center space-x-4">
+            {rightLinks.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                className={cn(
+                  "relative text-xl sm:text-2xl font-extrabold uppercase tracking-wider transition-all duration-300 px-4",
+                  pathname === link.href
+                    ? "text-white"
+                    : "text-gray-300 hover:text-blue-400 hover:scale-105",
+                  "after:content-[''] after:absolute after:bottom-[-8px] after:left-0 after:h-1 after:bg-blue-500 after:transition-all after:duration-300",
+                  pathname === link.href
+                    ? "after:w-full"
+                    : "after:w-0 hover:after:w-full"
+                )}
+              >
+                {link.label}
+              </Link>
+            ))}
+          </div>
+        </div>
+
+        {/* Mobile View */}
+        <div className="2xl:hidden flex h-20 items-center justify-between">
+          <Link href="/" className="flex items-center relative group">
+            <Image
+              src="/images/FitStop.png"
+              alt="DevVista Kit Logo"
+              width={120}
+              height={120}
+              className="h-30 w-30 rounded-full transition-transform group-hover:scale-110 shadow-2xl"
+            />
+            <div className="absolute -inset-4 bg-gray-500/30 rounded-full blur-2xl opacity-0 group-hover:opacity-100 transition-opacity" />
+          </Link>
+
+          <button
+            className="flex flex-col space-y-2 p-4 relative z-[1200]"
+            onClick={() => setIsOpen(!isOpen)}
+            aria-label="Toggle menu"
+          >
+            <span
+              className={cn(
+                hamburgerLine,
+                isOpen ? "rotate-45 translate-y-3 bg-white" : "bg-blue-500"
+              )}
+            />
+            <span
+              className={cn(hamburgerLine, isOpen ? "opacity-0" : "bg-blue-500")}
+            />
+            <span
+              className={cn(
+                hamburgerLine,
+                isOpen ? "-rotate-45 -translate-y-3 bg-white" : "bg-blue-500"
+              )}
+            />
+          </button>
+        </div>
+
+        {/* Social Links */}
+        <div className="absolute bottom-4 right-8 flex items-center space-x-6 pr-16">
+          <a
+            href="https://www.facebook.com/KathyCaiellosFitStop"
+            className="flex items-center justify-center text-gray-300 hover:text-blue-400 transition-all text-lg sm:text-xl font-bold uppercase hover:scale-105"
+            aria-label="Visit our Facebook page"
+            role="link"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Facebook className="ml-3 h-6 w-6 max-[1535px]:hidden" />
+          </a>
+          <div className="hidden 2xl:block">
+            <Link
+              href="/faq"
+              className={cn(
+                "relative text-lg sm:text-xl font-bold uppercase tracking-wider transition-all",
+                pathname === "/faq"
+                  ? "text-white"
+                  : "text-gray-300 hover:text-blue-400 hover:scale-105",
+                "after:content-[''] after:absolute after:bottom-[-8px] after:left-0 after:h-1 after:bg-blue-500 after:transition-all after:duration-300",
+                pathname === "/faq"
+                  ? "after:w-full"
+                  : "after:w-0 hover:after:w-full"
+              )}
+            >
+              FAQ
+            </Link>
+          </div>
+        </div>
+
+        {/* Mobile Menu */}
+        <AnimatePresence>
+          {isOpen && (
+            <motion.div
+              ref={menuRef}
+              variants={menuVariants}
+              initial="closed"
+              animate="open"
+              exit="closed"
+              className="fixed top-0 right-0 h-screen w-3/4 max-w-[280px] min-w-[200px] 2xl:hidden pt-24 px-4 shadow-2xl border-l-2 border-gray-700 bg-[#2D2D2D] z-[1200] overflow-y-auto"
+            >
+              <button
+                className="absolute top-6 right-6 text-gray-300 hover:text-blue-400 transition-all z-[1210]"
+                onClick={() => setIsOpen(false)}
+                aria-label="Close menu"
+              >
+                <svg
+                  className="w-8 h-8"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                </svg>
+              </button>
+
+              <div className="flex flex-col space-y-6">
+                {mobileLinks.map((link) => (
+                  <Link
+                    key={link.href}
+                    href={link.href}
+                    onClick={() => setIsOpen(false)}
+                    className={cn(
+                      "text-xl sm:text-2xl font-extrabold uppercase tracking-wider transition-all mobile-menu-link",
+                      pathname === link.href
+                        ? "text-white"
+                        : "text-gray-300 hover:text-blue-400 hover:scale-105"
+                    )}
+                  >
+                    {link.label}
+                  </Link>
+                ))}
+                <Link
+                  href="https://www.facebook.com/KathyCaiellosFitStop"
+                  className="text-xl sm:text-2xl font-extrabold uppercase tracking-wider text-gray-300 hover:text-blue-400 transition-all hover:scale-105 mobile-menu-link"
+                  aria-label="Visit our Facebook page"
+                  role="link"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  onClick={() => setIsOpen(false)}
+                >
+                  Facebook
+                </Link>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;

package/components/other/accordion.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDown } from 'lucide-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 justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 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 transition-all 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/components/other/admin-menu.tsx

@@ -0,0 +1,69 @@
+// src/components/AdminMenu.tsx
+"use client";
+
+import Link from "next/link";
+import { motion } from "framer-motion";
+import { X } from "lucide-react";
+import { CloseButton } from "@/components/other/button";
+
+interface AdminMenuProps {
+  onClose: () => void;
+}
+
+const menuItems = [
+  { href: "/analytics", label: "Analytics" },
+  { href: "/blog", label: "Blog" },
+  { href: "/adRequest", label: "Ad Requests" },
+];
+
+const modalVariants = {
+  hidden: { opacity: 0, y: "100vh" },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: [0.16, 1, 0.3, 1] } },
+  exit: { opacity: 0, y: "100vh", transition: { duration: 0.3, ease: "easeIn" } },
+};
+
+export default function AdminMenu({ onClose }: AdminMenuProps) {
+  return (
+    <motion.div
+      variants={modalVariants}
+      initial="hidden"
+      animate="visible"
+      exit="exit"
+      className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10000] p-4 isolate"
+      onClick={onClose}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="admin-menu-title"
+    >
+      <div
+        className="relative w-full max-w-2xl mx-4 p-8 md:p-12 rounded-2xl bg-blue-400/40 border border-white/20 shadow-2xl"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <CloseButton
+          onClick={onClose}
+          aria-label="Close admin menu"
+        >
+          <X className="h-6 w-6 sm:h-8 sm:w-8" />
+        </CloseButton>
+        <h3
+          id="admin-menu-title"
+          className="text-2xl md:text-3xl font-bold text-white mb-6 text-center"
+        >
+          Admin Menu
+        </h3>
+        <div className="flex flex-col space-y-5">
+          {menuItems.map((item) => (
+            <Link
+              key={item.href}
+              href={item.href}
+              className="block px-6 py-4 text-lg md:text-xl text-gray-200 hover:bg-gray-700 hover:text-blue-400 rounded-xl text-center transition-all"
+              onClick={onClose}
+            >
+              {item.label}
+            </Link>
+          ))}
+        </div>
+      </div>
+    </motion.div>
+  );
+}

package/components/other/alert-dialog.tsx

@@ -0,0 +1,141 @@
+'use client';
+
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+
+import { cn } from '@/lib/utils';
+import { buttonVariants } from '@/components/other/button';
+
+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=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}
+    />
+  </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/components/other/alert.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+  {
+    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, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn('mb-1 font-medium leading-none tracking-tight', className)}
+    {...props}
+  />
+));
+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/components/other/aspect-ratio.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
+
+const AspectRatio = AspectRatioPrimitive.Root;
+
+export { AspectRatio };

package/components/other/avatar.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+
+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 };