feat: Card component (#1326)

* feat: simple `Card` component

* fix: update background color in light mode

* chore: better playground page

* revert foreground color change

src/app/globals.css

@@ -4,11 +4,11 @@
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
+    --background: 240 4% 95%;
     --foreground: 224 71.4% 4.1%;
 
     --card: 0 0% 100%;
-    --card-foreground: 240 4% 16%;
+    --card-foreground: var(--foreground);
 
     --popover: 0 0% 100%;
     --popover-foreground: 224 71.4% 4.1%;
@@ -38,7 +38,7 @@
     --foreground: 210 20% 98%;
 
     --card: 240 5.26% 26.08%;
-    --card-foreground: 240 2% 58%;
+    --card-foreground: var(--foreground);
 
     --popover: 240 5.26% 26.08%;
     --popover-foreground: 240 2% 58%;

src/app/playground/page.tsx

@@ -1,10 +1,33 @@
+import { Card } from "@/components/ui/Card"
+import { Metadata } from "next"
+import { PropsWithChildren } from "react"
 import { ThemeToggle } from "../../v2/components/ThemeToggle"
 
+export const metadata: Metadata = {
+  title: "Playground",
+}
+
 export default function Page() {
   return (
-    <div>
-      <h1>Playground</h1>
-      <ThemeToggle />
+    <div className="p-8">
+      <h1 className="text-2xl font-bold">Playground</h1>
+
+      <div className="flex flex-col items-start gap-4">
+        <Section title="Theme toggle">
+          <ThemeToggle />
+        </Section>
+
+        <Section title="Card">
+          <Card className="p-4">This is a card</Card>
+        </Section>
+      </div>
     </div>
   )
 }
+
+const Section = ({ title, children }: PropsWithChildren<{ title: string }>) => (
+  <section className="flex flex-col gap-2">
+    <h2 className="text-lg font-bold">{title}</h2>
+    {children}
+  </section>
+)

src/v2/components/ui/Card.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "overflow-hidden rounded-2xl bg-card text-card-foreground shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Card.displayName = "Card"
+
+export { Card }