feat(emcnn): created emcn

Author: emir-karabeg

apps/sim/components/emcn/components/badge.tsx

@@ -0,0 +1,27 @@
+import type * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const badgeVariants = cva(
+  'inline-flex items-center px-[9px] py-[2.5px] text-[13px] font-medium rounded-[40px] focus:outline-none',
+  {
+    variants: {
+      variant: {
+        default: 'dark:bg-[#272727] dark:text-[#B1B1B1]',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
+}
+
+export { Badge, badgeVariants }

apps/sim/components/emcn/components/button.tsx

@@ -0,0 +1,28 @@
+import type * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 outline-none focus:outline-none focus-visible:outline-none rounded-[4px] px-[8px] py-[6px]',
+  {
+    variants: {
+      variant: {
+        default: 'rounded',
+        '3d': 'dark:text-[#AEAEAE] border-t border-l border-r dark:border-[#303030] shadow-[0_2px_0_0] dark:shadow-[#303030] hover:shadow-[0_4px_0_0] transition-all hover:-translate-y-0.5 hover:dark:text-[#E6E6E6]',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {}
+
+function Button({ className, variant, ...props }: ButtonProps) {
+  return <button className={cn(buttonVariants({ variant }), className)} {...props} />
+}
+
+export { Button, buttonVariants }

apps/sim/components/emcn/components/index.ts

@@ -0,0 +1,2 @@
+export { Badge } from './badge'
+export { Button } from './button'

apps/sim/components/emcn/icons/chevron-down.tsx

@@ -0,0 +1,25 @@
+import type { SVGProps } from 'react'
+
+/**
+ * ChevronDown icon component
+ * @param props - SVG properties including className, fill, etc.
+ */
+export function ChevronDown(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width='10'
+      height='6'
+      viewBox='0 0 10 6'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M5.47124 5.47133C5.34622 5.59631 5.17668 5.66652 4.9999 5.66652C4.82313 5.66652 4.65359 5.59631 4.52857 5.47133L0.757237 1.69999C0.693563 1.6385 0.642775 1.56493 0.607836 1.4836C0.572896 1.40226 0.554505 1.31478 0.553736 1.22626C0.552967 1.13774 0.569835 1.04996 0.603355 0.968026C0.636876 0.886095 0.686378 0.81166 0.748973 0.749064C0.811568 0.686469 0.886003 0.636967 0.967934 0.603447C1.04986 0.569926 1.13765 0.553058 1.22617 0.553828C1.31469 0.554597 1.40217 0.572988 1.48351 0.607927C1.56484 0.642866 1.63841 0.693654 1.6999 0.757328L4.9999 4.05733L8.2999 0.757328C8.42564 0.635889 8.59404 0.568693 8.76884 0.570212C8.94363 0.571731 9.11084 0.641843 9.23445 0.765449C9.35805 0.889054 9.42817 1.05626 9.42969 1.23106C9.43121 1.40586 9.36401 1.57426 9.24257 1.69999L5.47124 5.47133Z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}

apps/sim/components/emcn/icons/index.ts

@@ -0,0 +1,2 @@
+export { ChevronDown } from './chevron-down'
+export { PanelLeft } from './panel-left'

apps/sim/components/emcn/icons/panel-left.tsx

@@ -0,0 +1,23 @@
+import type { SVGProps } from 'react'
+
+/**
+ * PanelLeft icon component
+ * @param props - SVG properties including className, fill, etc.
+ */
+export function PanelLeft(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width='16'
+      height='14'
+      viewBox='0 0 16 14'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path
+        d='M9.33301 0.5C10.4138 0.5 11.2687 0.499523 11.9482 0.580078C12.6403 0.662154 13.209 0.833996 13.6963 1.21777C14.0303 1.48085 14.3188 1.80524 14.5488 2.1748C14.8787 2.70489 15.0256 3.3188 15.0967 4.07715C15.1672 4.82972 15.167 5.77992 15.167 7C15.167 8.22008 15.1672 9.17028 15.0967 9.92285C15.0256 10.6812 14.8787 11.2951 14.5488 11.8252C14.3188 12.1948 14.0303 12.5191 13.6963 12.7822C13.209 13.166 12.6403 13.3378 11.9482 13.4199C11.2687 13.5005 10.4138 13.5 9.33301 13.5H6.66699C5.58622 13.5 4.73134 13.5005 4.05176 13.4199C3.35971 13.3378 2.79101 13.166 2.30371 12.7822C1.96974 12.5191 1.68123 12.1948 1.45117 11.8252C1.1213 11.2951 0.974405 10.6812 0.90332 9.92285C0.832808 9.17028 0.833008 8.22008 0.833008 7C0.833008 5.77992 0.832808 4.82972 0.90332 4.07715C0.974405 3.3188 1.1213 2.70489 1.45117 2.1748C1.68123 1.80524 1.96974 1.48085 2.30371 1.21777C2.79101 0.833996 3.35971 0.662154 4.05176 0.580078C4.73134 0.499523 5.58622 0.5 6.66699 0.5H9.33301ZM6.83301 12.5H9.33301C10.4382 12.5 11.2239 12.4988 11.8311 12.4268C12.4253 12.3563 12.7908 12.2234 13.0781 11.9971C13.3173 11.8086 13.5289 11.5721 13.7002 11.2969C13.9126 10.9555 14.036 10.5178 14.1006 9.8291C14.1657 9.13409 14.167 8.23916 14.167 7C14.167 5.76084 14.1657 4.86591 14.1006 4.1709C14.036 3.48215 13.9126 3.04452 13.7002 2.70312C13.5289 2.42788 13.3173 2.19139 13.0781 2.00293C12.7908 1.77661 12.4253 1.64375 11.8311 1.57324C11.2239 1.50125 10.4382 1.5 9.33301 1.5H6.83301V12.5ZM5.83301 1.50098C5.14755 1.50512 4.61095 1.52083 4.16895 1.57324C3.57469 1.64375 3.20925 1.77661 2.92188 2.00293C2.68266 2.19139 2.47113 2.42788 2.2998 2.70312C2.08736 3.04452 1.96397 3.48215 1.89941 4.1709C1.83432 4.86591 1.83301 5.76084 1.83301 7C1.83301 8.23916 1.83432 9.13409 1.89941 9.8291C1.96397 10.5178 2.08736 10.9555 2.2998 11.2969C2.47113 11.5721 2.68266 11.8086 2.92188 11.9971C3.20925 12.2234 3.57469 12.3563 4.16895 12.4268C4.61095 12.4792 5.14755 12.4939 5.83301 12.498V1.50098ZM4 5.16699C4.27614 5.16699 4.5 5.39085 4.5 5.66699C4.49982 5.94298 4.27603 6.16699 4 6.16699H3.33301C3.05712 6.16682 2.83318 5.94288 2.83301 5.66699C2.83301 5.39096 3.05702 5.16717 3.33301 5.16699H4ZM4 3.16699C4.27614 3.16699 4.5 3.39085 4.5 3.66699C4.49982 3.94298 4.27603 4.16699 4 4.16699H3.33301C3.05712 4.16682 2.83318 3.94288 2.83301 3.66699C2.83301 3.39096 3.05702 3.16717 3.33301 3.16699H4Z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}

apps/sim/components/emcn/index.ts

@@ -0,0 +1,2 @@
+export * from './components'
+export * from './icons'