feat: Requirement compound component

src/components/requirements/Requirement.tsx

@@ -0,0 +1,48 @@
+import { cn } from "@/lib/cssUtils";
+import type { PropsWithChildren } from "react";
+
+export const Requirement = ({
+  className,
+  children,
+}: PropsWithChildren<{ className?: string }>) => (
+  <div className={cn("flex w-full items-center gap-4 py-2", className)}>
+    {children}
+  </div>
+);
+
+export const RequirementImage = ({
+  className,
+  children,
+}: PropsWithChildren<{ className?: string }>) => (
+  <div
+    className={cn(
+      "flex size-11 shrink-0 items-center justify-center overflow-hidden rounded-full bg-blackAlpha dark:bg-blackAlpha-hard",
+      className,
+    )}
+  >
+    {children}
+  </div>
+);
+
+export const RequirementContent = ({
+  className,
+  children,
+}: PropsWithChildren<{ className?: string }>) => (
+  <div className={cn("flex flex-grow flex-col items-start", className)}>
+    {children}
+  </div>
+);
+
+export const RequirementFooter = ({
+  className,
+  children,
+}: PropsWithChildren<{ className?: string }>) => (
+  <div
+    className={cn(
+      "flex flex-wrap items-center gap-1.5 has-[>*]:mt-1",
+      className,
+    )}
+  >
+    {children}
+  </div>
+);

src/stories/requirements/Requirement.stories.tsx

@@ -0,0 +1,49 @@
+import { ChainIndicator } from "@/components/requirements/ChainIndicator";
+import { DataBlockWithCopy } from "@/components/requirements/DataBlockWithCopy";
+import {
+  Requirement,
+  RequirementContent,
+  RequirementFooter,
+  RequirementImage,
+} from "@/components/requirements/Requirement";
+import { Card } from "@/components/ui/Card";
+import { TooltipProvider } from "@/components/ui/Tooltip";
+import { QuestionMark } from "@phosphor-icons/react/dist/ssr";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const RequirementExample = () => (
+  <Card className="max-w-sm px-6 py-4">
+    <Requirement>
+      <RequirementImage>
+        <QuestionMark weight="bold" className="size-6" />
+      </RequirementImage>
+      <RequirementContent>
+        <p>
+          <span>{"Copy "}</span>
+          <DataBlockWithCopy text="this text" />
+          <span>{" to your clipboard"}</span>
+        </p>
+
+        <RequirementFooter className="text-secondary text-sm">
+          <ChainIndicator chain={1} />
+        </RequirementFooter>
+      </RequirementContent>
+    </Requirement>
+  </Card>
+);
+
+const meta: Meta<typeof RequirementExample> = {
+  title: "Requirement building blocks/Requirement",
+  component: RequirementExample,
+  decorators: (Story) => (
+    <TooltipProvider>
+      <Story />
+    </TooltipProvider>
+  ),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RequirementExample>;
+
+export const Default: Story = {};