Implementacion de cardComponent

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

@@ -0,0 +1,25 @@
+import { withAs } from "@/utils/hoc";
+import { cn } from "@/utils/tw-merge";
+import { CARD_GROUP_VARIANTS } from "./card.const";
+
+export type CardProps = {
+  clickable?: boolean;
+  className?: string;
+  disabled?: boolean;
+};
+
+export const Card = withAs((Component, props: CardProps) => {
+  const { clickable = false, disabled = false, className, ...attr } = props;
+
+  return (
+    <Component
+      className={cn(
+        ...CARD_GROUP_VARIANTS.default,
+        clickable && "cursor-pointer",
+        disabled && "pointer-events-none",
+        className
+      )}
+      {...attr}
+    ></Component>
+  );
+}, "div");

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

@@ -0,0 +1,14 @@
+export const CARD_GROUP_VARIANTS = {
+  default: [
+    "min-w-96 min-h-96",
+    "border-1 shadow-brutal rounded-lg border-black p-4 bg-light",
+    "hover:shadow-rb-violet-700 hover:border-violet-700",
+    "disabled:bg-neutral-100 disabled:shadow-none disabled:border-neutral-400 disabled:text-neutral-400",
+    "active:shadow-none",
+
+    "dark:active:shadow-none",
+    "hover:dark:border-primary-600 hover:dark:shadow-rb-primary-600",
+    "dark:bg-neutral-800",
+    "dark:disabled:shadow-none dar:disabled:border-neutral-100"
+  ],
+};

js/react/lib/components/card/card.types.ts

@@ -0,0 +1,8 @@
+import { CARD_GROUP_VARIANTS } from "./card.const";
+
+export interface CardGroupProps {
+  variant?: keyof typeof CARD_GROUP_VARIANTS;
+  disabled?: boolean;
+  children: React.ReactNode;
+  className?: string;
+}

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

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

js/react/lib/index.ts

@@ -1,5 +1,6 @@
 export * from "./components/Example";
 export * from "./components/button";
+export * from "./components/card";
 export * from "./components/contact-form";
 export * from "./components/chip";
 export * from "./components/tag";

js/react/showcase/App.tsx

@@ -12,6 +12,7 @@ import {
   Radio,
   Badge,
   DropdownState,
+  Card
   Calendar,
   CalendarRangeDate,
   DropdownTree,
@@ -369,6 +370,19 @@ export function App() {
           },
         }}
       />
+      <ShowComponent
+        title="Card"
+        propsDef={{
+          clickable: {
+            type: "boolean",
+            default: false,
+          },
+          className: {
+            type: "string",
+          },
+        }}
+        component={Card}
+      />
       <ShowComponent title="Scroll bar ">
         <div className="scrollbar mx-auto h-48 w-full overflow-auto">
           <div className="mx-auto flex h-96 w-20 items-center">Container</div>