React/level

js/react/lib/components/level/index.ts

@@ -0,0 +1 @@
+export * from "./level.component";

js/react/lib/components/level/level.component.tsx

@@ -0,0 +1,26 @@
+import { withAs } from "../../utils/hoc/with-as.hoc";
+import { cn } from "../../utils/tw-merge";
+import { LEVEL_LABELS, LEVEL_VARIANTS, LevelVariants } from "./level.const";
+
+type LevelProps = {
+  variant: LevelVariants;
+  className?: string;
+};
+
+export const Level = withAs(
+  (Component, { variant, className, ...rest }: LevelProps) => {
+    return (
+      <Component
+        {...rest}
+        className={cn([
+          "rounded-xl border border-black px-2 leading-[150%]",
+          "desktop:text-sm text-xxs",
+          LEVEL_VARIANTS[variant],
+          className,
+        ])}
+      >
+        {LEVEL_LABELS[variant]}
+      </Component>
+    );
+  }
+);

js/react/lib/components/level/level.const.ts

@@ -0,0 +1,15 @@
+export const LEVEL_VARIANTS = {
+  n1: "bg-primary-100",
+  n2: "bg-primary-300",
+  n3: "bg-primary-500",
+  op: "bg-secondary-400",
+};
+
+export const LEVEL_LABELS = {
+  n1: "N1",
+  n2: "N2",
+  n3: "N3",
+  op: "Op",
+};
+
+export type LevelVariants = keyof typeof LEVEL_VARIANTS;

js/react/lib/components/tag/index.ts

@@ -1 +1 @@
-export { Tag } from "./tag.component"
+export { Tag } from "./tag.component";

js/react/lib/components/tag/tag.component.tsx

@@ -1,24 +1,26 @@
-import { ComponentPropsWithoutRef, useMemo } from "react";
 import { cn } from "../../utils/tw-merge";
 import { TAG_VARIANTS } from "./tag.const";
+import { withAs } from "../../utils/hoc/with-as.hoc";
 
-type TagProps<C extends React.ElementType> = {
-  as?: C;
+type TagProps = {
   label?: string;
-} & Omit<ComponentPropsWithoutRef<C>, "children">;
+  selected?: boolean;
+  className?: string;
+};
 
-export const Tag = <C extends React.ElementType = "span"> ({ label, selected, className , as, ...rest }: TagProps<C>) => {
-  const Component = useMemo(() => as || "span", [as])
-  return (
-    <Component
-      className={cn([
-        selected ? TAG_VARIANTS.selected : TAG_VARIANTS.default,
-        "text-xs font-semibold grid place-items-center px-2 h-7 border cursor-pointer rounded-[20px] transition",
-        className
-      ])}
-      {...rest}
-    >
-      {label}
-    </Component>
-  );
-};
+export const Tag = withAs(
+  (Component, { label, selected, className, ...rest }: TagProps) => {
+    return (
+      <Component
+        className={cn([
+          selected ? TAG_VARIANTS.selected : TAG_VARIANTS.default,
+          "grid h-7 cursor-pointer place-items-center rounded-[20px] border px-2 text-xs font-semibold transition",
+          className,
+        ])}
+        {...rest}
+      >
+        {label}
+      </Component>
+    );
+  }
+);

js/react/lib/components/tag/tag.const.ts

@@ -7,4 +7,4 @@ export const TAG_VARIANTS = {
     "bg-secondary-100 border-secondary-600 text-secondary-600",
     "dark:bg-primary-950 dark:border-primary-500 dark:text-primary-500",
   ],
-};
+};

js/react/lib/index.ts

@@ -3,4 +3,5 @@ export * from "./components/button";
 export * from "./components/chip";
 export * from "./components/tag";
 export * from "./components/flap";
+export * from "./components/level";
 export * from "./icons";

js/react/lib/styles.css

@@ -83,7 +83,9 @@
 
   --color-light: #fafafa;
   --color-dark: #2e2e2e;
+
   /* Fonts */
+  --text-xxs: 10px;
   --text-caption: 12px;
   --text-caption--font-weight: 400;
   --text-caption--letter-spacing: 0em;

js/react/lib/utils/hoc/with-as.hoc.tsx

@@ -0,0 +1,12 @@
+import React, { ComponentPropsWithoutRef } from "react";
+
+export function withAs<P extends object>(
+  render: (Component: React.ElementType, props: P) => React.ReactNode
+) {
+  return function WithAsComponent<C extends React.ElementType = "div">(
+    props: { as?: C } & Omit<ComponentPropsWithoutRef<C>, keyof P> & P
+  ) {
+    const { as: Component = "div", ...rest } = props;
+    return render(Component, rest as P);
+  };
+}

js/react/showcase/App.tsx

@@ -6,6 +6,7 @@ import {
   Telegram,
   Flap,
   Chip,
+  Level,
 } from "@rustlanges/react";
 import { ShowComponent } from "./ShowComponent";
 
@@ -143,6 +144,26 @@ export function App() {
         }}
         component={Flap}
       />
+      <ShowComponent
+        title="Level"
+        propsDef={{
+          variant: {
+            type: "string",
+            options: ["n1", "n2", "n3", "op"],
+            default: "n1",
+          },
+          label: {
+            type: "string",
+            default: "Oficial",
+          },
+          as: {
+            type: "string",
+            options: ["a", "button", "span"],
+            default: "span",
+          },
+        }}
+        component={Level}
+      />
     </div>
   );
 }