chore: merge main branch

src/app/components/ui/Badge.tsx

@@ -0,0 +1,35 @@
+import { type VariantProps, cva } from "class-variance-authority";
+import { cn } from "lib/cn";
+import { type ElementRef, type HTMLAttributes, forwardRef } from "react";
+
+export const badgeVariants = cva(
+  "inline-flex items-center rounded-md px-2 transition-colors focus:outline-none focus-visible:ring-4 focus:ring-ring font-medium max-w-max gap-1.5 bg-badge-background text-badge-foreground",
+  {
+    variants: {
+      size: {
+        sm: "text-xs h-5",
+        md: "text-sm h-6",
+        lg: "text-base h-8",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+);
+
+export interface BadgeProps
+  extends HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+const Badge = forwardRef<ElementRef<"div">, BadgeProps>(
+  ({ className, size, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(badgeVariants({ size }), className)}
+      {...props}
+    />
+  ),
+);
+
+export { Badge };

src/app/components/ui/Card.tsx

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

src/app/explorer/components/GuildCard.tsx

@@ -0,0 +1,32 @@
+import { ImageSquare, Users } from "@phosphor-icons/react/dist/ssr";
+import { Badge } from "app/components/ui/Badge";
+import { Card } from "app/components/ui/Card";
+import Link from "next/link";
+
+export const GuildCard = () => {
+  return (
+    <Link href="#" className="rounded-2xl outline-none focus-visible:ring-4">
+      <Card className="relative grid grid-cols-[theme(space.12)_1fr] grid-rows-2 items-center gap-x-4 gap-y-0.5 overflow-hidden rounded-2xl px-6 py-7 shadow-md before:absolute before:inset-0 before:bg-black/5 before:opacity-0 before:transition-opacity before:duration-200 before:content-[''] hover:before:opacity-55 active:before:opacity-85 dark:before:bg-white/5">
+        <div className="row-span-2 grid size-12 place-items-center rounded-full bg-image text-white">
+          <ImageSquare weight="duotone" className="size-6" />
+        </div>
+
+        <h3 className="line-clamp-1 font-black font-display text-lg">
+          Sample guild
+        </h3>
+        <div className="flex flex-wrap gap-1">
+          <Badge>
+            <Users className="size-4" />
+            <span>
+              {new Intl.NumberFormat("en", {
+                notation: "compact",
+              }).format(125244)}
+            </span>
+          </Badge>
+
+          <Badge>5 groups</Badge>
+        </div>
+      </Card>
+    </Link>
+  );
+};

src/app/explorer/page.tsx

@@ -0,0 +1,11 @@
+import { GuildCard } from "./components/GuildCard";
+
+const Explorer = () => {
+  return (
+    <main className="container mx-auto grid max-w-screen-lg gap-4 px-4 py-8 sm:grid-cols-2 lg:grid-cols-3">
+      <GuildCard />
+    </main>
+  );
+};
+
+export default Explorer;

src/app/globals.css

@@ -99,6 +99,9 @@ html {
   --button-success-foreground: #fff;
   --button-success-subtle: var(--green-300);
   --button-success-subtle-foreground: var(--green-500);
+
+  --badge-background: rgba(0, 0, 0, 0.06);
+  --badge-foreground: var(--foreground);
 }
 
 .dark {
@@ -135,13 +138,15 @@ html {
   --button-success-foreground: #fff;
   --button-success-subtle: var(--green-300);
   --button-success-subtle-foreground: var(--green-500);
+
+  --badge-background: rgba(255, 255, 255, 0.06);
+  --badge-foreground: var(--foreground);
 }
 
 .dark video,
 .dark img {
   @apply brightness-90 contrast-125;
 }
-
 body {
   @apply bg-background text-foreground font-sans min-h-screen antialiased selection:bg-foreground selection:text-background;
 }

src/stories/Badge.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Badge, type BadgeProps } from "app/components/ui/Badge";
+
+const meta: Meta<typeof Badge> = {
+  title: "Design system/Badge",
+  component: Badge,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Badge>;
+
+export const Default: Story = {
+  args: {
+    children: "Default",
+    size: "md",
+  },
+  argTypes: {
+    size: {
+      type: "string",
+      control: "select",
+      options: ["sm", "md", "lg"] satisfies BadgeProps["size"][],
+    },
+  },
+};

tailwind.config.ts

@@ -23,6 +23,10 @@ const config = {
         card: "var(--card)",
         image: "var(--image)",
         skeleton: "var(--skeleton)",
+        badge: {
+          background: "var(--badge-background)",
+          foreground: "var(--badge-foreground)"
+        }
       },
     },
   },