From a6c1a7da972b083fdb1f701435a3f40601bc99ea Mon Sep 17 00:00:00 2001
From: Lila Rest <mail@lila.rest>
Date: Tue, 16 May 2023 16:28:42 +0200
Subject: [PATCH] feat(components): add Card component outline

---
 src/components/ui/Card.tsx | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 src/components/ui/Card.tsx

diff --git a/src/components/ui/Card.tsx b/src/components/ui/Card.tsx
new file mode 100644
index 00000000..1adf4f35
--- /dev/null
+++ b/src/components/ui/Card.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { twMerge } from "tailwind-merge";
+
+export const cardVariants = ["default", "borderless"] as const;
+export type CardVariant = (typeof cardVariants)[number];
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: CardVariant;
+}
+
+export const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ className, children, variant = "default", ...props }, ref) => (
+    <div
+      className={twMerge(
+        "",
+
+        // Variants
+        {
+          default: "",
+          borderless: "",
+        }[variant],
+
+        // Custom classes
+        className
+      )}
+      {...props}
+      ref={ref}
+    >
+      {children}
+    </div>
+  )
+);
+Card.displayName = "Card";
+export default Card;