From e397e95dd540fbaadfb5adc1c10aa12956385ec4 Mon Sep 17 00:00:00 2001 From: BrickheadJohnny Date: Tue, 19 Nov 2024 11:44:22 +0100 Subject: [PATCH 1/3] feat: simple Card component --- src/app/components/ui/Card.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 src/app/components/ui/Card.tsx diff --git a/src/app/components/ui/Card.tsx b/src/app/components/ui/Card.tsx new file mode 100644 index 0000000000..a9731698f6 --- /dev/null +++ b/src/app/components/ui/Card.tsx @@ -0,0 +1,18 @@ +import { cn } from "lib/cn"; +import { type HTMLAttributes, forwardRef } from "react"; + +const Card = forwardRef>( + ({ className, ...props }, ref) => ( +
+ ), +); +Card.displayName = "Card"; + +export { Card }; From 077ce8bb74302e3815a659cf7d349889bd12cd01 Mon Sep 17 00:00:00 2001 From: BrickheadJohnny Date: Tue, 19 Nov 2024 11:54:26 +0100 Subject: [PATCH 2/3] feat: simple Badge component --- src/app/components/ui/Badge.tsx | 35 +++++++++++++++++++++++++++++++++ src/app/globals.css | 3 +++ src/stories/Badge.stories.tsx | 25 +++++++++++++++++++++++ tailwind.config.ts | 4 ++++ 4 files changed, 67 insertions(+) create mode 100644 src/app/components/ui/Badge.tsx create mode 100644 src/stories/Badge.stories.tsx diff --git a/src/app/components/ui/Badge.tsx b/src/app/components/ui/Badge.tsx new file mode 100644 index 0000000000..cacfbb1971 --- /dev/null +++ b/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, + VariantProps {} + +const Badge = forwardRef, BadgeProps>( + ({ className, size, ...props }, ref) => ( +
+ ), +); + +export { Badge }; diff --git a/src/app/globals.css b/src/app/globals.css index 165e521c3d..77bbf084d1 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -100,6 +100,9 @@ --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); } :root[data-theme="dark"], diff --git a/src/stories/Badge.stories.tsx b/src/stories/Badge.stories.tsx new file mode 100644 index 0000000000..e567cfa9d0 --- /dev/null +++ b/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 = { + title: "Design system/Badge", + component: Badge, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + children: "Default", + size: "md", + }, + argTypes: { + size: { + type: "string", + control: "select", + options: ["sm", "md", "lg"] satisfies BadgeProps["size"][], + }, + }, +}; diff --git a/tailwind.config.ts b/tailwind.config.ts index 5552e2489a..3148a94fc2 100644 --- a/tailwind.config.ts +++ b/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)" + } }, }, }, From c42fea7420962eaa604ea437a3807c3ab6144646 Mon Sep 17 00:00:00 2001 From: BrickheadJohnny Date: Tue, 19 Nov 2024 12:06:21 +0100 Subject: [PATCH 3/3] feat: simple GuildCard component without props --- src/app/explorer/components/GuildCard.tsx | 32 +++++++++++++++++++++++ src/app/explorer/page.tsx | 11 ++++++++ src/app/globals.css | 3 +++ 3 files changed, 46 insertions(+) create mode 100644 src/app/explorer/components/GuildCard.tsx create mode 100644 src/app/explorer/page.tsx diff --git a/src/app/explorer/components/GuildCard.tsx b/src/app/explorer/components/GuildCard.tsx new file mode 100644 index 0000000000..e3116259fc --- /dev/null +++ b/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 ( + + +
+ +
+ +

+ Sample guild +

+
+ + + + {new Intl.NumberFormat("en", { + notation: "compact", + }).format(125244)} + + + + 5 groups +
+ + + ); +}; diff --git a/src/app/explorer/page.tsx b/src/app/explorer/page.tsx new file mode 100644 index 0000000000..83f7cd1db5 --- /dev/null +++ b/src/app/explorer/page.tsx @@ -0,0 +1,11 @@ +import { GuildCard } from "./components/GuildCard"; + +const Explorer = () => { + return ( +
+ +
+ ); +}; + +export default Explorer; diff --git a/src/app/globals.css b/src/app/globals.css index 77bbf084d1..227d4fc695 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -140,5 +140,8 @@ --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); } }