Merge branch 'v3-main' into dialog-component

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "prepare": "husky install",
+    "prepare": "husky",
     "dev": "next dev",
     "dev:turbo": "next dev --turbo",
     "build": "next build",
@@ -23,6 +23,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "next": "15.0.3",
+    "next-themes": "^0.4.3",
     "react": "19.0.0-rc-66855b96-20241106",
     "react-dom": "19.0.0-rc-66855b96-20241106",
     "tailwind-merge": "^2.5.4",

src/app/components/ui/Badge.tsx

@@ -0,0 +1,35 @@
+import { type VariantProps, cva } from "class-variance-authority";
+import { cn } from "lib/cssUtils";
+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/Button.tsx

@@ -1,7 +1,7 @@
 import { CircleNotch } from "@phosphor-icons/react/dist/ssr";
 import { Slot } from "@radix-ui/react-slot";
 import { type VariantProps, cva } from "class-variance-authority";
-import { cn } from "lib/cn";
+import { cn } from "lib/cssUtils";
 import { type ButtonHTMLAttributes, type ReactNode, forwardRef } from "react";
 
 const buttonVariants = cva(

src/app/components/ui/Card.tsx

@@ -0,0 +1,18 @@
+import { cn } from "lib/cssUtils";
+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;