React/flap

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

@@ -0,0 +1,53 @@
+import { ComponentPropsWithoutRef } from "react";
+import { FLAP_ICONS, FLAP_VARIANTS } from "./flap.const";
+import { cn } from "../../utils/tw-merge";
+
+type FlapProps = {
+  label: string;
+  variant: keyof typeof FLAP_VARIANTS;
+} & Omit<ComponentPropsWithoutRef<"span">, "children">;
+
+export const Flap = ({ label, variant, className, ...rest }: FlapProps) => {
+  const Icon = FLAP_ICONS[variant];
+  return (
+    <div
+      title={label}
+      className={cn([
+        "relative flex justify-center gap-2",
+        "h-6 w-20 px-5",
+        "desktop:w-[167.5px] desktop:h-[47.5px] desktop:px-8",
+        className,
+      ])}
+      {...rest}
+    >
+      <svg
+        viewBox="0 0 145 49"
+        fill="none"
+        preserveAspectRatio="none"
+        className={cn([
+          "desktop:px-3 absolute left-0 top-0 z-0 h-full w-full px-1",
+          FLAP_VARIANTS[variant],
+        ])}
+      >
+        <path
+          d="M120.962 5.00869L141.872 30.4082C147.78 37.5847 142.676 48.3997 133.38 48.3997L12.488 48.3996C3.19249 48.3996 -1.91244 37.5847 3.99561 30.4082L24.906 5.00869C26.9955 2.47056 30.1108 1.00009 33.3984 1.00009L112.47 1.0001C115.757 1.0001 118.872 2.47057 120.962 5.00869Z"
+          fill="currentColor"
+          stroke="black"
+        />
+      </svg>
+      <span
+        className={cn([
+          "z-10 flex h-fit w-full items-center justify-center gap-2 text-center font-medium text-neutral-950",
+          !!Icon && "desktop:*:even:block pt-[3px] *:even:hidden",
+          "desktop:pt-1",
+          "[&>svg]:h-3 [&>svg]:w-3",
+        ])}
+      >
+        {Icon ? <Icon /> : null}
+        <span className="text-paragraph-2 desktop:pt-0 line-clamp-1 pt-px">
+          {label}
+        </span>
+      </span>
+    </div>
+  );
+};

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

@@ -0,0 +1,15 @@
+import { StarBold } from "../../icons";
+
+export const FLAP_VARIANTS = {
+  highlight: "text-primary-400",
+  numeric: "text-primary-200",
+  descriptive: "text-secondary-400",
+};
+
+export const FLAP_ICONS = {
+  highlight: StarBold,
+  numeric: undefined,
+  descriptive: undefined,
+};
+
+export type FlapVariants = keyof typeof FLAP_VARIANTS;

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

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

js/react/lib/index.ts

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

js/react/lib/styles.css

@@ -264,7 +264,7 @@
 
   .text-paragraph-2 {
     font-size: 12px;
-    line-height: 160%;
+    line-height: 150%;
     letter-spacing: 0;
 
     @apply desktop:text-[14px];

js/react/showcase/App.tsx

@@ -1,4 +1,12 @@
-import { Button, Chip, Example, Github, Tag, Telegram } from "@rustlanges/react";
+import {
+  Button,
+  Example,
+  Github,
+  Tag,
+  Telegram,
+  Flap,
+  Chip,
+} from "@rustlanges/react";
 import { ShowComponent } from "./ShowComponent";
 
 export function App() {
@@ -99,26 +107,41 @@ export function App() {
         title="Tag"
         component={Tag}
         propsDef={{
-          label: { 
-            type: "string", 
+          label: {
+            type: "string",
             default: "#tag",
           },
-          selected: { 
-            type: "boolean", 
-            default: false, 
+          selected: {
+            type: "boolean",
+            default: false,
             optional: true,
-          }, 
-          as: { 
-            type: "string", 
+          },
+          as: {
+            type: "string",
             options: ["span", "button", "a"],
             optional: true,
           },
-         
+
           onClick: {
             type: "callback",
-            optional: true
+            optional: true,
+          },
+        }}
+      />
+      <ShowComponent
+        title="Flap"
+        propsDef={{
+          variant: {
+            type: "string",
+            options: ["highlight", "descriptive", "numeric"],
+            default: "descriptive",
+          },
+          label: {
+            type: "string",
+            default: "Oficial",
           },
         }}
+        component={Flap}
       />
     </div>
   );

js/react/showcase/ShowComponent/Container.tsx

@@ -22,7 +22,9 @@ export function ShowComponentContainer(
           <ChevronDown />
         </span>
       </summary>
-      <div className={"flex gap-2 " + props.contentClassName}>
+      <div
+        className={"flex flex-col gap-5 sm:flex-row " + props.contentClassName}
+      >
         {props.children}
       </div>
     </details>

js/react/showcase/ShowComponent/types.ts

@@ -28,7 +28,7 @@ export type PropsDefConfig<Field> = {
 } & PropsDefOptional<Field>;
 
 export type PropsDef<P> = {
-  [K in keyof P]-?: PropsDefConfig<P[K]>;
+  [K in keyof P]: PropsDefConfig<P[K]>;
 };
 
 export type GenericPropDef = Record<string, PropsDefConfig<unknown>>;