BelkacemYerfa · BelkacemYerfa · Mar 1, 2024 · Mar 1, 2024
diff --git a/README.md b/README.md
@@ -1,15 +1,13 @@
 # shadcn extension
 
-Accessible and customizable components , that extends [shadcn]("https://ui.shadcn.com/") components.
+Accessible and customizable components , that extends [shadcn](https://ui.shadcn.com/) components.
+
+![hero](packages/public/og.png)
 
 ## Documentation
 
-To check all the available components and their documentation, visit the [shadcn-extension]("https://shadcn-extension.vercel.app/").
+To check all the available components and their documentation, visit the [shadcn extension](https://shadcn-extension.vercel.app/).
 
 ## Contributing
 
 You want to contribute , just check [contributing guide](/CONTRIBUTING.md).
-
-## License
-
-Licensed under the [MIT license](/LICENSE.md).
diff --git a/docs/app/layout.tsx b/docs/app/layout.tsx
@@ -1,22 +1,24 @@
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-import './globals.css'
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
+  title: "shadcn extension",
+  description:
+    "Shadcn extension for Next.js with Tailwind CSS and TypeScript , sonner and vercel analytics , and more.",
+  creator: "Belkacem Yerfa",
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en">
       <body className={inter.className}>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/docs/pages/components/carousel/_meta.json b/docs/pages/components/carousel/_meta.json
@@ -1,5 +1,5 @@
 {
   "image-upload-carousel": {
-    "title": "Image Upload Carousel (experimental)"
+    "title": "Image Upload Carousel "
   }
 }
diff --git a/docs/pages/components/carousel/image-upload-carousel.mdx b/docs/pages/components/carousel/image-upload-carousel.mdx
@@ -69,10 +69,7 @@ This is a boolean that you can pass to the component to allow the user to resele
 
 This is an example of how you can use the component
 
-<Tabs items={["code" , "preview"]} >
-  <Tabs.Tab>
-
-```jsx 
+````jsx copy
     import {
       CarouselMainContainer,
       CarouselThumbsContainer,
@@ -163,9 +160,5 @@ This is an example of how you can use the component
 
     ```
 
-  </Tabs.Tab>
-  <Tabs.Tab>
-  none
-  </Tabs.Tab>
 
-</Tabs>
+````
diff --git a/packages/public/og.png b/packages/public/og.png
diff --git a/packages/src/app/layout.tsx b/packages/src/app/layout.tsx
@@ -6,13 +6,39 @@ import { Toaster } from "sonner";
 import { SiteHeader } from "@/components/layouts/site-header";
 import { SiteFooter } from "@/components/layouts/site-footer";
 import { Analytics } from "@vercel/analytics/react";
+import { siteConfig } from "@/config/site-config";
 
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
   title: "Shadcn extension",
   description:
     "Shadcn extension for Next.js with Tailwind CSS and TypeScript , sonner and vercel analytics , and more.",
+  creator: "Belkacem Yerfa",
+  metadataBase: new URL(siteConfig.url),
+  openGraph: {
+    type: "website",
+    url: siteConfig.url,
+    locale: "en_US",
+    title: siteConfig.name,
+    description: siteConfig.description,
+    siteName: siteConfig.name,
+    images: [
+      {
+        url: siteConfig.ogImage,
+        width: 1200,
+        height: 630,
+        alt: siteConfig.name,
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: siteConfig.name,
+    description: siteConfig.description,
+    images: [siteConfig.ogImage],
+    creator: "@bylka207",
+  },
 };
 
 export default function RootLayout({

diff --git a/packages/src/components/extension/carousel/carousel.tsx b/packages/src/components/extension/carousel/carousel.tsx
@@ -226,7 +226,7 @@ const SliderMainItem = forwardRef<
       ref={ref}
       className={cn(
         `min-w-0 shrink-0 grow-0 basis-full ${
-          orientation === "vertical" ? "py-1" : "px-1"
+          orientation === "vertical" ? "mb-1" : "mr-1"
         }`,
         className
       )}
@@ -253,7 +253,7 @@ const SliderThumbItem = forwardRef<
       onClick={() => onThumbClick(index)}
       className={cn(
         "flex min-w-0 shrink-0 grow-0 basis-1/3",
-        `${orientation === "vertical" ? "py-1" : "px-1"}`,
+        `${orientation === "vertical" ? "mb-1" : "mr-1"}`,
         className
       )}
     >

diff --git a/packages/src/components/extension/file-uploader/file-uploader.tsx b/packages/src/components/extension/file-uploader/file-uploader.tsx
@@ -69,7 +69,6 @@ export const FileUploader = forwardRef<
   ) => {
     const [isFileTooBig, setIsFileTooBig] = useState(false);
     const [isLOF, setIsLOF] = useState(false);
-    const containerRef = useRef<HTMLDivElement>(null);
     const [activeIndex, setActiveIndex] = useState(-1);
     const {
       accept = {
@@ -188,9 +187,6 @@ export const FileUploader = forwardRef<
       onDropRejected: () => setIsFileTooBig(true),
       onDropAccepted: () => setIsFileTooBig(false),
     });
-    const { height, width } = useResizeObserver({
-      ref: containerRef,
-    });
 
     return (
       <FileUploaderContext.Provider
@@ -204,14 +200,13 @@ export const FileUploader = forwardRef<
         }}
       >
         <div
-          ref={containerRef}
+          ref={ref}
           tabIndex={0}
           onKeyDownCapture={handleKeyDown}
           className={cn(
             "grid gap-2 w-full relative focus:outline-none",
             className
           )}
-          style={{ height, width }}
           {...props}
         >
           {children}
@@ -303,7 +298,7 @@ export const FileInput = forwardRef<
     <div
       ref={ref}
       {...props}
-      className={`w-full ${
+      className={`relative w-full ${
         isLOF ? "opacity-50 cursor-not-allowed " : "cursor-pointer "
       }`}
     >

diff --git a/packages/src/components/extension/model.tsx b/packages/src/components/extension/model.tsx
@@ -197,30 +197,27 @@ export const CarouselExample = () => {
     <Carousel
       activeKeyboard
       orientation="vertical"
-      className="max-w-xs w-full flex items-center gap-2 "
+      className="max-w-xs w-full h-fit flex items-center gap-2 "
     >
-      <div className="relative basis-3/4">
-        <CarouselNext />
-        <CarouselPrevious />
+      <div className="relative basis-3/4 ">
         <CarouselMainContainer className="h-60">
           {Array.from({ length: 10 }).map((_, index) => (
             <SliderMainItem
               key={index}
               className="border border-muted flex items-center justify-center h-52 rounded-md"
             >
-              Slide {index + 1}
+              <span>Slide {index + 1}</span>
             </SliderMainItem>
           ))}
         </CarouselMainContainer>
       </div>
+
       <CarouselThumbsContainer className="h-60 basis-1/4 ">
         {Array.from({ length: 10 }).map((_, index) => (
-          <SliderThumbItem
-            key={index}
-            index={index}
-            className="border border-muted flex items-center justify-center h-16 rounded-md"
-          >
-            Slide {index + 1}
+          <SliderThumbItem key={index} index={index}>
+            <span className="border border-muted flex items-center justify-center h-full w-full rounded-md">
+              Slide {index + 1}
+            </span>
           </SliderThumbItem>
         ))}
       </CarouselThumbsContainer>
@@ -401,7 +398,7 @@ export const OtpTest = () => {
     toast.success(`Success , Your Otp code is : ${data.otp}`);
   };
   return (
-    <div className="max-w-xs flex items-center justify-center outline outline-1 outline-muted rounded-md p-4">
+    <div className="max-w-xs h-fit flex items-center justify-center outline outline-1 outline-muted rounded-md p-4">
       <div className="w-full space-y-2">
         <div className="space-y-1">
           <h2 className="font-semibold">OTP verification</h2>
@@ -441,7 +438,7 @@ export const BreadCrumbTest = () => {
   return (
     <BreadCrumb variant={"link"} className="gap-1">
       <BreadCrumbItem
-        className="px-2 h-8"
+        className="px-2 h-8 bg-muted"
         isActive
         activeVariant={{
           variant: "ghost",
@@ -450,7 +447,7 @@ export const BreadCrumbTest = () => {
         <Link href="/">Home</Link>
       </BreadCrumbItem>
       <BreadCrumbSeparator className="" />
-      <BreadCrumbItem className="px-2 ">Settings</BreadCrumbItem>
+      <BreadCrumbItem className="px-2 underline">Settings</BreadCrumbItem>
       <BreadCrumbSeparator />
       <BreadCrumbEllipsis className="px-2" />
       <BreadCrumbSeparator />
@@ -501,32 +498,22 @@ export const FileUploaderTest = () => {
       value={files}
       onValueChange={setFiles}
       dropzoneOptions={dropZoneConfig}
-      className="w-full max-w-md space-y-1"
+      className="relative max-w-xs space-y-1"
     >
       <FileInput className="border border-dashed border-gray-500">
-        <div className="flex items-center justify-center flex-col pt-3 pb-4">
+        <div className="flex items-center justify-center flex-col pt-3 pb-4 w-full ">
           <FileSvgDraw />
         </div>
       </FileInput>
       <FileUploaderContent className="h-48 ">
-        <Carousel>
-          <CarouselMainContainer>
-            {files &&
-              files.length > 0 &&
-              files.map((file, i) => (
-                <SliderMainItem key={i} className="basis-1/3">
-                  <FileUploaderItem index={i} className="relative  w-full h-32">
-                    <Image
-                      src={URL.createObjectURL(file)}
-                      alt="preview"
-                      fill
-                      className="rounded-md object-cover"
-                    />
-                  </FileUploaderItem>
-                </SliderMainItem>
-              ))}
-          </CarouselMainContainer>
-        </Carousel>
+        {files &&
+          files.length > 0 &&
+          files.map((file, i) => (
+            <FileUploaderItem key={i} index={i}>
+              <Paperclip className="h-4 w-4 stroke-current" />
+              <span>{file.name}</span>
+            </FileUploaderItem>
+          ))}
       </FileUploaderContent>
     </FileUploader>
   );
@@ -806,34 +793,24 @@ export const MultiSelectTest = () => {
   const [value, setValue] = useState<string[]>([]);
   const [loop, setLoop] = useState<boolean>(false);
   return (
-    <div className="flex gap-2 max-w-lg w-full ">
-      <MultiSelector
-        value={value}
-        onValueChange={setValue}
-        className="max-w-xs"
-        loop={loop}
-      >
-        <MultiSelectorTrigger>
-          <MultiSelectorInput placeholder="Select your framework" />
-        </MultiSelectorTrigger>
-        <MultiSelectorContent>
-          <MultiSelectorList>
-            {options.map((option, i) => (
-              <MultiSelectorItem key={i} value={option.value}>
-                {option.label}
-              </MultiSelectorItem>
-            ))}
-          </MultiSelectorList>
-        </MultiSelectorContent>
-      </MultiSelector>
-      <Button
-        type="button"
-        variant={"outline"}
-        className="h-10"
-        onClick={() => setLoop(!loop)}
-      >
-        {loop ? "Disable Loop" : "Enable Loop"}
-      </Button>
-    </div>
+    <MultiSelector
+      value={value}
+      onValueChange={setValue}
+      className="max-w-xs"
+      loop={loop}
+    >
+      <MultiSelectorTrigger>
+        <MultiSelectorInput placeholder="Select your framework" />
+      </MultiSelectorTrigger>
+      <MultiSelectorContent>
+        <MultiSelectorList>
+          {options.map((option, i) => (
+            <MultiSelectorItem key={i} value={option.value}>
+              {option.label}
+            </MultiSelectorItem>
+          ))}
+        </MultiSelectorList>
+      </MultiSelectorContent>
+    </MultiSelector>
   );
 };
diff --git a/packages/src/components/layouts/site-footer.tsx b/packages/src/components/layouts/site-footer.tsx
@@ -1,10 +1,9 @@
 import Link from "next/link";
-import { Icons } from "../icons";
 import { siteConfig } from "@/config/site-config";
 
 export const SiteFooter = () => {
   return (
-    <footer className="py-2 px-4 w-full">
+    <footer className="py-2 px-4 w-full fixed bottom-0">
       <p className="text-center flex items-center justify-center w-full text-sm leading-loose md:text-left">
         <span>
           Built by{" "}

diff --git a/packages/src/config/site-config.ts b/packages/src/config/site-config.ts
@@ -1,7 +1,7 @@
 export const siteConfig = {
   name: "Shadcn Extension",
   url: "https://shadcn-extension-landing.vercel.app/",
-  ogImage: "",
+  ogImage: "https://shadcn-extension-landing.vercel.app/og.png",
   description:
     "Discover new possibilities with the extended Shadcn UI library. More components, more layouts, more creativity.",
   links: {