Add vendor certifications tab

Signed-off-by: Bryan Frimin <bryan@getprobo.com>
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>

packages/ui/src/Atoms/Badge/Badge.tsx

@@ -1,7 +1,9 @@
 import type { HTMLAttributes } from "react";
 import { tv } from "tailwind-variants";
+import { Slot } from "../Slot";
 
 type Props = {
+    asChild?: boolean;
     variant?:
         | "success"
         | "warning"
@@ -11,10 +13,10 @@ type Props = {
         | "outline"
         | "highlight";
     size?: "sm" | "md";
-} & HTMLAttributes<HTMLDivElement>;
+} & HTMLAttributes<HTMLElement>;
 
 const badge = tv({
-    base: "font-medium rounded-lg w-max flex gap-1 items-center",
+    base: "font-medium rounded-lg w-max flex gap-1 items-center group whitespace-nowrap",
     variants: {
         variant: {
             success: "bg-success text-txt-success",
@@ -37,5 +39,7 @@ const badge = tv({
 });
 
 export function Badge(props: Props) {
-    return <div {...props} className={badge(props)} />;
+    const Component = props.asChild ? Slot : "div";
+    const { asChild, size, variant, ...restProps } = props;
+    return <Component {...restProps} className={badge(props)} />;
 }

packages/ui/src/Atoms/Dropzone/Dropzone.stories.tsx

@@ -0,0 +1,12 @@
+import { Dropzone } from "./Dropzone";
+import type { Meta, StoryObj } from "@storybook/react";
+
+export default {
+    title: "Atoms/Dropzone",
+    component: Dropzone,
+    argTypes: {},
+} satisfies Meta<typeof Dropzone>;
+
+type Story = StoryObj<typeof Dropzone>;
+
+export const Default: Story = {};

packages/ui/src/Atoms/Dropzone/Dropzone.tsx

@@ -0,0 +1,24 @@
+import { useCallback } from "react";
+import { useDropzone } from "react-dropzone";
+
+type Props = {};
+
+export function Dropzone({}: Props) {
+    const onDrop = useCallback((acceptedFiles) => {
+        // Do something with the files
+    }, []);
+    const { getRootProps, getInputProps, isDragActive } = useDropzone({
+        onDrop,
+    });
+
+    return (
+        <div {...getRootProps()}>
+            <input {...getInputProps()} />
+            {isDragActive ? (
+                <p>Drop the files here ...</p>
+            ) : (
+                <p>Drag 'n' drop some files here, or click to select files</p>
+            )}
+        </div>
+    );
+}

packages/ui/src/Atoms/Select/Select.tsx

@@ -83,7 +83,10 @@ export function Select({
 
     return (
         <Root onValueChange={onValueChange} value={value}>
-            <Trigger {...props} className={trigger()}>
+            <Trigger
+                {...props}
+                className={trigger({ className: props.className })}
+            >
                 <Value placeholder={placeholder} />
                 <Icon className={icon()}>
                     <IconChevronGrabberVertical size={16} />