UI kit gallery demo: Dropdown with secondary labels (#399)

frontend/uikit-gallery/src/Dropdown/3. Small.fixture.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { DropdownFixture } from "./shared";
+
+export default function DropdownDefaultFixture() {
+  return <DropdownFixture fixture="small" />;
+}

frontend/uikit-gallery/src/Dropdown/shared.tsx

@@ -6,7 +6,7 @@ import { Dropdown, TokenIcon } from "@liquity2/uikit";
 import { useEffect, useState } from "react";
 import { useFixtureInput } from "react-cosmos/client";
 
-function itemRow(
+function tokenItemRow(
   symbol: ComponentProps<typeof TokenIcon>["symbol"],
   name: string,
   balance: string,
@@ -18,6 +18,24 @@ function itemRow(
   };
 }
 
+const itemsWithSecondary = [
+  {
+    label: "Manually",
+    secondary: "Set the interest rate as you see fit",
+  },
+  {
+    label: "By Strategy",
+    secondary: "It’s an automated strategy developed by ICP that helps avoid redemption and reduce costs",
+  },
+  {
+    label: "By Delegation",
+    secondary: `
+      Delegates manage your interest rate, optimizing costs and preventing redemption.
+      They charge a fee for this.
+    `,
+  },
+] as const;
+
 function PlaceholderIcon() {
   return (
     <div
@@ -40,10 +58,11 @@ function PlaceholderIcon() {
 export function DropdownFixture({
   fixture,
 }: {
-  fixture: "default" | "placeholder";
+  fixture: "default" | "placeholder" | "small";
 }) {
   const [showIcon] = useFixtureInput("show icon", true);
   const [placeholder] = useFixtureInput("placeholder", fixture === "placeholder");
+  const [small] = useFixtureInput("small", fixture === "small");
   const [selected, setSelected] = useState(-1);
 
   useEffect(() => {
@@ -69,14 +88,15 @@ export function DropdownFixture({
             icon: <PlaceholderIcon />,
           }
           : undefined}
-        items={[
-          itemRow("ETH", "ETH", "10.00"),
-          itemRow("RETH", "rETH", "30.00"),
-          itemRow("STETH", "stETH", "40.00"),
+        items={small ? itemsWithSecondary : [
+          tokenItemRow("ETH", "ETH", "10.00"),
+          tokenItemRow("RETH", "rETH", "30.00"),
+          tokenItemRow("STETH", "stETH", "40.00"),
         ]}
         menuWidth={300}
         onSelect={setSelected}
         selected={selected}
+        size={small ? "small" : "medium"}
       />
     </div>
   );