Skip to content

Commit 8bcd19b

Browse files
samejrsamejr
committed
Adds an icon route to storybook
1 parent f777c36 commit 8bcd19b

3 files changed

Lines changed: 370 additions & 0 deletions

File tree

‎apps/webapp/app/assets/icons/RightSideMenuIcon.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { motion } from "framer-motion";
2+
import { useState } from "react";
3+
4+
export function RightSideMenuIcon({ className }: { className?: string }) {
5+
const [hovered, setHovered] = useState(false);
6+
7+
return (
8+
<svg
9+
className={className}
10+
width="24"
11+
height="24"
12+
viewBox="0 0 24 24"
13+
fill="none"
14+
xmlns="http://www.w3.org/2000/svg"
15+
onMouseEnter={() => setHovered(true)}
16+
onMouseLeave={() => setHovered(false)}
17+
>
18+
<rect
19+
x="4"
20+
y="4"
21+
width="16"
22+
height="16"
23+
rx="2"
24+
stroke="currentColor"
25+
strokeWidth="2"
26+
/>
27+
<motion.rect
28+
y="6"
29+
height="12"
30+
rx="1"
31+
fill="currentColor"
32+
initial={false}
33+
animate={{ x: hovered ? 17 : 13, width: hovered ? 1 : 5 }}
34+
transition={{ duration: 0.2, ease: "easeInOut" }}
35+
/>
36+
</svg>
37+
);
38+
}

‎apps/webapp/app/routes/storybook.icons/route.tsx‎

Lines changed: 328 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,328 @@
1+
import { type ComponentType, type ReactNode } from "react";
2+
import { AbacusIcon } from "~/assets/icons/AbacusIcon";
3+
import { AIChatIcon } from "~/assets/icons/AIChatIcon";
4+
import { AIMetricsIcon } from "~/assets/icons/AIMetricsIcon";
5+
import { AIPenIcon } from "~/assets/icons/AIPenIcon";
6+
import { AISparkleIcon } from "~/assets/icons/AISparkleIcon";
7+
import {
8+
AnthropicIcon,
9+
AzureIcon,
10+
CerebrasIcon,
11+
DeepseekIcon,
12+
GeminiIcon,
13+
LlamaIcon,
14+
MistralIcon,
15+
OpenAIIcon,
16+
PerplexityIcon,
17+
XAIIcon,
18+
} from "~/assets/icons/AiProviderIcons";
19+
import { AnthropicLogoIcon } from "~/assets/icons/AnthropicLogoIcon";
20+
import { ArchiveIcon, UnarchiveIcon } from "~/assets/icons/ArchiveIcon";
21+
import { ArrowLeftRightIcon } from "~/assets/icons/ArrowLeftRightIcon";
22+
import { ArrowRightSquareIcon } from "~/assets/icons/ArrowRightSquareIcon";
23+
import { ArrowTopRightBottomLeftIcon } from "~/assets/icons/ArrowTopRightBottomLeftIcon";
24+
import { AttemptIcon } from "~/assets/icons/AttemptIcon";
25+
import { AvatarCircleIcon } from "~/assets/icons/AvatarCircleIcon";
26+
import { BatchesIcon } from "~/assets/icons/BatchesIcon";
27+
import { BeakerIcon } from "~/assets/icons/BeakerIcon";
28+
import { BellIcon } from "~/assets/icons/BellIcon";
29+
import { BookIcon } from "~/assets/icons/BookIcon";
30+
import { Box3DIcon } from "~/assets/icons/Box3DIcon";
31+
import { BugIcon } from "~/assets/icons/BugIcon";
32+
import { BulbIcon } from "~/assets/icons/BulbIcon";
33+
import { BunLogoIcon } from "~/assets/icons/BunLogoIcon";
34+
import { ChartArrowIcon } from "~/assets/icons/ChartArrowIcon";
35+
import { ChartBarIcon } from "~/assets/icons/ChartBarIcon";
36+
import { ChevronExtraSmallDown } from "~/assets/icons/ChevronExtraSmallDown";
37+
import { ChevronExtraSmallUp } from "~/assets/icons/ChevronExtraSmallUp";
38+
import { ClockIcon } from "~/assets/icons/ClockIcon";
39+
import { ClockRotateLeftIcon } from "~/assets/icons/ClockRotateLeftIcon";
40+
import { AWS, DigitalOcean } from "~/assets/icons/CloudProviderIcon";
41+
import { CodeSquareIcon } from "~/assets/icons/CodeSquareIcon";
42+
import { ConcurrencyIcon } from "~/assets/icons/ConcurrencyIcon";
43+
import {
44+
CheckingConnectionIcon,
45+
ConnectedIcon,
46+
DisconnectedIcon,
47+
} from "~/assets/icons/ConnectionIcons";
48+
import { CubeSparkleIcon } from "~/assets/icons/CubeSparkleIcon";
49+
import { DeploymentsIcon } from "~/assets/icons/DeploymentsIcon";
50+
import { DialIcon } from "~/assets/icons/DialIcon";
51+
import { DropdownIcon } from "~/assets/icons/DropdownIcon";
52+
import { DynamicTriggerIcon } from "~/assets/icons/DynamicTriggerIcon";
53+
import { EndpointIcon } from "~/assets/icons/EndpointIcon";
54+
import { EnvelopeIcon } from "~/assets/icons/EnvelopeIcon";
55+
import {
56+
BranchEnvironmentIconSmall,
57+
DeployedEnvironmentIcon,
58+
DeployedEnvironmentIconSmall,
59+
DevEnvironmentIcon,
60+
DevEnvironmentIconSmall,
61+
PreviewEnvironmentIconSmall,
62+
ProdEnvironmentIcon,
63+
ProdEnvironmentIconSmall,
64+
} from "~/assets/icons/EnvironmentIcons";
65+
import { ErrorIcon } from "~/assets/icons/ErrorIcon";
66+
import { ExitIcon } from "~/assets/icons/ExitIcon";
67+
import { FolderClosedIcon } from "~/assets/icons/FolderClosedIcon";
68+
import { FolderOpenIcon } from "~/assets/icons/FolderOpenIcon";
69+
import { FunctionIcon } from "~/assets/icons/FunctionIcon";
70+
import { GlobeLinesIcon } from "~/assets/icons/GlobeLinesIcon";
71+
import { HomeIcon } from "~/assets/icons/HomeIcon";
72+
import { IDIcon } from "~/assets/icons/IDIcon";
73+
import { InfoIcon } from "~/assets/icons/InfoIcon";
74+
import { IntegrationsIcon } from "~/assets/icons/IntegrationsIcon";
75+
import { KeyboardDownIcon } from "~/assets/icons/KeyboardDownIcon";
76+
import { KeyboardEnterIcon } from "~/assets/icons/KeyboardEnterIcon";
77+
import { KeyboardIcon } from "~/assets/icons/KeyboardIcon";
78+
import { KeyboardLeftIcon } from "~/assets/icons/KeyboardLeftIcon";
79+
import { KeyboardRightIcon } from "~/assets/icons/KeyboardRightIcon";
80+
import { KeyboardUpIcon } from "~/assets/icons/KeyboardUpIcon";
81+
import { KeyboardWindowsIcon } from "~/assets/icons/KeyboardWindowsIcon";
82+
import { KeyIcon } from "~/assets/icons/KeyIcon";
83+
import { KeyValueIcon } from "~/assets/icons/KeyValueIcon";
84+
import { ListBulletIcon } from "~/assets/icons/ListBulletIcon";
85+
import { ListCheckedIcon } from "~/assets/icons/ListCheckedIcon";
86+
import { LogsIcon } from "~/assets/icons/LogsIcon";
87+
import { MachineDefaultIcon } from "~/assets/icons/MachineIcon";
88+
import { MiddlewareIcon } from "~/assets/icons/MiddlewareIcon";
89+
import { MoveToBottomIcon } from "~/assets/icons/MoveToBottomIcon";
90+
import { MoveToTopIcon } from "~/assets/icons/MoveToTopIcon";
91+
import { MoveUpIcon } from "~/assets/icons/MoveUpIcon";
92+
import { NodejsLogoIcon } from "~/assets/icons/NodejsLogoIcon";
93+
import { OneTreeIcon } from "~/assets/icons/OneTreeIcon";
94+
import { PadlockIcon } from "~/assets/icons/PadlockIcon";
95+
import { PauseIcon } from "~/assets/icons/PauseIcon";
96+
import { PlaygroundIcon } from "~/assets/icons/PlaygroundIcon";
97+
import { PlusIcon } from "~/assets/icons/PlusIcon";
98+
import { PrivateIcon } from "~/assets/icons/PrivateIcon";
99+
import { PromoteIcon } from "~/assets/icons/PromoteIcon";
100+
import { PythonLogoIcon } from "~/assets/icons/PythonLogoIcon";
101+
import { QuestionMarkIcon } from "~/assets/icons/QuestionMarkIcon";
102+
import { QueuesIcon } from "~/assets/icons/QueuesIcon";
103+
import { RadarPulseIcon } from "~/assets/icons/RadarPulseIcon";
104+
import { FlagEurope, FlagUSA } from "~/assets/icons/RegionIcons";
105+
import { RightSideMenuIcon } from "~/assets/icons/RightSideMenuIcon";
106+
import { RolesIcon } from "~/assets/icons/RolesIcon";
107+
import { RunFunctionIcon } from "~/assets/icons/RunFunctionIcon";
108+
import {
109+
RunsIcon,
110+
RunsIconExtraSmall,
111+
RunsIconSmall,
112+
} from "~/assets/icons/RunsIcon";
113+
import { SaplingIcon } from "~/assets/icons/SaplingIcon";
114+
import { ScheduleIcon } from "~/assets/icons/ScheduleIcon";
115+
import { ShieldIcon } from "~/assets/icons/ShieldIcon";
116+
import { ShieldLockIcon } from "~/assets/icons/ShieldLockIcon";
117+
import {
118+
ShowParentIcon,
119+
ShowParentIconSelected,
120+
} from "~/assets/icons/ShowParentIcon";
121+
import { SideMenuRightClosedIcon } from "~/assets/icons/SideMenuRightClosed";
122+
import { SlackIcon } from "~/assets/icons/SlackIcon";
123+
import { SlackMonoIcon } from "~/assets/icons/SlackMonoIcon";
124+
import { SlidersIcon } from "~/assets/icons/SlidersIcon";
125+
import { SnakedArrowIcon } from "~/assets/icons/SnakedArrowIcon";
126+
import { SparkleListIcon } from "~/assets/icons/SparkleListIcon";
127+
import { StarIcon } from "~/assets/icons/StarIcon";
128+
import { StatusIcon } from "~/assets/icons/StatusIcon";
129+
import { StreamsIcon } from "~/assets/icons/StreamsIcon";
130+
import { TableIcon } from "~/assets/icons/TableIcon";
131+
import { TaskCachedIcon } from "~/assets/icons/TaskCachedIcon";
132+
import { TaskIcon, TaskIconSmall } from "~/assets/icons/TaskIcon";
133+
import { TestTubeIcon } from "~/assets/icons/TestTubeIcon";
134+
import { TextInlineIcon } from "~/assets/icons/TextInlineIcon";
135+
import { TextWrapIcon } from "~/assets/icons/TextWrapIcon";
136+
import { TimedOutIcon } from "~/assets/icons/TimedOutIcon";
137+
import { ToggleArrowIcon } from "~/assets/icons/ToggleArrowIcon";
138+
import { TraceIcon } from "~/assets/icons/TraceIcon";
139+
import { TriggerIcon } from "~/assets/icons/TriggerIcon";
140+
import { TwoTreesIcon } from "~/assets/icons/TwoTreesIcon";
141+
import { UserCrossIcon } from "~/assets/icons/UserCrossIcon";
142+
import { UserGroupIcon } from "~/assets/icons/UserGroupIcon";
143+
import { WaitpointTokenIcon } from "~/assets/icons/WaitpointTokenIcon";
144+
import { WarmStartIcon } from "~/assets/icons/WarmStartIcon";
145+
import { WebhookIcon } from "~/assets/icons/WebhookIcon";
146+
147+
type IconEntry = {
148+
name: string;
149+
render: (className: string) => ReactNode;
150+
};
151+
152+
function simple(Component: ComponentType<{ className?: string }>): IconEntry["render"] {
153+
return (className) => <Component className={className} />;
154+
}
155+
156+
const icons: IconEntry[] = [
157+
{ name: "AbacusIcon", render: simple(AbacusIcon) },
158+
{ name: "AIChatIcon", render: simple(AIChatIcon) },
159+
{ name: "AIMetricsIcon", render: simple(AIMetricsIcon) },
160+
{ name: "AIPenIcon", render: simple(AIPenIcon) },
161+
{ name: "AISparkleIcon", render: simple(AISparkleIcon) },
162+
{ name: "AnthropicIcon", render: simple(AnthropicIcon) },
163+
{ name: "AnthropicLogoIcon", render: simple(AnthropicLogoIcon) },
164+
{ name: "ArchiveIcon", render: simple(ArchiveIcon) },
165+
{ name: "ArrowLeftRightIcon", render: simple(ArrowLeftRightIcon) },
166+
{ name: "ArrowRightSquareIcon", render: simple(ArrowRightSquareIcon) },
167+
{ name: "ArrowTopRightBottomLeftIcon", render: simple(ArrowTopRightBottomLeftIcon) },
168+
{ name: "AttemptIcon", render: simple(AttemptIcon) },
169+
{ name: "AvatarCircleIcon", render: simple(AvatarCircleIcon) },
170+
{ name: "AWS", render: simple(AWS) },
171+
{ name: "AzureIcon", render: simple(AzureIcon) },
172+
{ name: "BatchesIcon", render: simple(BatchesIcon) },
173+
{ name: "BeakerIcon", render: simple(BeakerIcon) },
174+
{ name: "BellIcon", render: simple(BellIcon) },
175+
{ name: "BookIcon", render: simple(BookIcon) },
176+
{ name: "Box3DIcon", render: simple(Box3DIcon) },
177+
{ name: "BranchEnvironmentIconSmall", render: simple(BranchEnvironmentIconSmall) },
178+
{ name: "BugIcon", render: simple(BugIcon) },
179+
{ name: "BulbIcon", render: simple(BulbIcon) },
180+
{ name: "BunLogoIcon", render: simple(BunLogoIcon) },
181+
{ name: "CerebrasIcon", render: simple(CerebrasIcon) },
182+
{ name: "ChartArrowIcon", render: simple(ChartArrowIcon) },
183+
{ name: "ChartBarIcon", render: simple(ChartBarIcon) },
184+
{ name: "CheckingConnectionIcon", render: simple(CheckingConnectionIcon) },
185+
{ name: "ChevronExtraSmallDown", render: simple(ChevronExtraSmallDown) },
186+
{ name: "ChevronExtraSmallUp", render: simple(ChevronExtraSmallUp) },
187+
{ name: "ClockIcon", render: simple(ClockIcon) },
188+
{ name: "ClockRotateLeftIcon", render: simple(ClockRotateLeftIcon) },
189+
{ name: "CodeSquareIcon", render: simple(CodeSquareIcon) },
190+
{ name: "ConcurrencyIcon", render: simple(ConcurrencyIcon) },
191+
{ name: "ConnectedIcon", render: simple(ConnectedIcon) },
192+
{ name: "CubeSparkleIcon", render: simple(CubeSparkleIcon) },
193+
{ name: "DeepseekIcon", render: simple(DeepseekIcon) },
194+
{ name: "DeployedEnvironmentIcon", render: simple(DeployedEnvironmentIcon) },
195+
{ name: "DeployedEnvironmentIconSmall", render: simple(DeployedEnvironmentIconSmall) },
196+
{ name: "DeploymentsIcon", render: simple(DeploymentsIcon) },
197+
{ name: "DevEnvironmentIcon", render: simple(DevEnvironmentIcon) },
198+
{ name: "DevEnvironmentIconSmall", render: simple(DevEnvironmentIconSmall) },
199+
{ name: "DialIcon", render: simple(DialIcon) },
200+
{ name: "DigitalOcean", render: simple(DigitalOcean) },
201+
{ name: "DisconnectedIcon", render: simple(DisconnectedIcon) },
202+
{ name: "DropdownIcon", render: simple(DropdownIcon) },
203+
{ name: "DynamicTriggerIcon", render: simple(DynamicTriggerIcon) },
204+
{ name: "EndpointIcon", render: simple(EndpointIcon) },
205+
{ name: "EnvelopeIcon", render: simple(EnvelopeIcon) },
206+
{ name: "ErrorIcon", render: simple(ErrorIcon) },
207+
{ name: "ExitIcon", render: simple(ExitIcon) },
208+
{ name: "FlagEurope", render: simple(FlagEurope) },
209+
{ name: "FlagUSA", render: simple(FlagUSA) },
210+
{ name: "FolderClosedIcon", render: simple(FolderClosedIcon) },
211+
{ name: "FolderOpenIcon", render: simple(FolderOpenIcon) },
212+
{ name: "FunctionIcon", render: simple(FunctionIcon) },
213+
{ name: "GeminiIcon", render: simple(GeminiIcon) },
214+
{ name: "GlobeLinesIcon", render: simple(GlobeLinesIcon) },
215+
{ name: "HomeIcon", render: simple(HomeIcon) },
216+
{ name: "IDIcon", render: simple(IDIcon) },
217+
{ name: "InfoIcon", render: simple(InfoIcon) },
218+
{ name: "IntegrationsIcon", render: simple(IntegrationsIcon) },
219+
{ name: "KeyboardDownIcon", render: simple(KeyboardDownIcon) },
220+
{ name: "KeyboardEnterIcon", render: simple(KeyboardEnterIcon) },
221+
{ name: "KeyboardIcon", render: simple(KeyboardIcon) },
222+
{ name: "KeyboardLeftIcon", render: simple(KeyboardLeftIcon) },
223+
{ name: "KeyboardRightIcon", render: simple(KeyboardRightIcon) },
224+
{ name: "KeyboardUpIcon", render: simple(KeyboardUpIcon) },
225+
{ name: "KeyboardWindowsIcon", render: simple(KeyboardWindowsIcon) },
226+
{ name: "KeyIcon", render: simple(KeyIcon) },
227+
{ name: "KeyValueIcon", render: simple(KeyValueIcon) },
228+
{ name: "ListBulletIcon", render: simple(ListBulletIcon) },
229+
{ name: "ListCheckedIcon", render: simple(ListCheckedIcon) },
230+
{ name: "LlamaIcon", render: simple(LlamaIcon) },
231+
{ name: "LogsIcon", render: simple(LogsIcon) },
232+
{ name: "MachineDefaultIcon", render: simple(MachineDefaultIcon) },
233+
{ name: "MiddlewareIcon", render: simple(MiddlewareIcon) },
234+
{ name: "MistralIcon", render: simple(MistralIcon) },
235+
{ name: "MoveToBottomIcon", render: simple(MoveToBottomIcon) },
236+
{ name: "MoveToTopIcon", render: simple(MoveToTopIcon) },
237+
{ name: "MoveUpIcon", render: simple(MoveUpIcon) },
238+
{ name: "NodejsLogoIcon", render: simple(NodejsLogoIcon) },
239+
{ name: "OneTreeIcon", render: simple(OneTreeIcon) },
240+
{ name: "OpenAIIcon", render: simple(OpenAIIcon) },
241+
{ name: "PadlockIcon", render: simple(PadlockIcon) },
242+
{ name: "PauseIcon", render: simple(PauseIcon) },
243+
{ name: "PerplexityIcon", render: simple(PerplexityIcon) },
244+
{ name: "PlaygroundIcon", render: simple(PlaygroundIcon) },
245+
{ name: "PlusIcon", render: simple(PlusIcon) },
246+
{ name: "PreviewEnvironmentIconSmall", render: simple(PreviewEnvironmentIconSmall) },
247+
{ name: "PrivateIcon", render: simple(PrivateIcon) },
248+
{ name: "ProdEnvironmentIcon", render: simple(ProdEnvironmentIcon) },
249+
{ name: "ProdEnvironmentIconSmall", render: simple(ProdEnvironmentIconSmall) },
250+
{ name: "PromoteIcon", render: simple(PromoteIcon) },
251+
{ name: "PythonLogoIcon", render: simple(PythonLogoIcon) },
252+
{ name: "QuestionMarkIcon", render: simple(QuestionMarkIcon) },
253+
{ name: "QueuesIcon", render: simple(QueuesIcon) },
254+
{ name: "RadarPulseIcon", render: simple(RadarPulseIcon) },
255+
{ name: "RightSideMenuIcon", render: simple(RightSideMenuIcon) },
256+
{ name: "RolesIcon", render: simple(RolesIcon) },
257+
{ name: "RunFunctionIcon", render: simple(RunFunctionIcon) },
258+
{ name: "RunsIcon", render: simple(RunsIcon) },
259+
{ name: "RunsIconExtraSmall", render: simple(RunsIconExtraSmall) },
260+
{ name: "RunsIconSmall", render: simple(RunsIconSmall) },
261+
{ name: "SaplingIcon", render: simple(SaplingIcon) },
262+
{ name: "ScheduleIcon", render: simple(ScheduleIcon) },
263+
{ name: "ShieldIcon", render: simple(ShieldIcon) },
264+
{ name: "ShieldLockIcon", render: simple(ShieldLockIcon) },
265+
{ name: "ShowParentIcon", render: simple(ShowParentIcon) },
266+
{ name: "ShowParentIconSelected", render: simple(ShowParentIconSelected) },
267+
{ name: "SideMenuRightClosedIcon", render: simple(SideMenuRightClosedIcon) },
268+
{ name: "SlackIcon", render: simple(SlackIcon) },
269+
{ name: "SlackMonoIcon", render: simple(SlackMonoIcon) },
270+
{ name: "SlidersIcon", render: simple(SlidersIcon) },
271+
{ name: "SnakedArrowIcon", render: simple(SnakedArrowIcon) },
272+
{ name: "SparkleListIcon", render: simple(SparkleListIcon) },
273+
{ name: "StarIcon", render: simple(StarIcon) },
274+
{ name: "StatusIcon", render: simple(StatusIcon) },
275+
{ name: "StreamsIcon", render: simple(StreamsIcon) },
276+
{ name: "TableIcon", render: simple(TableIcon) },
277+
{ name: "TaskCachedIcon", render: simple(TaskCachedIcon) },
278+
{ name: "TaskIcon", render: simple(TaskIcon) },
279+
{ name: "TaskIconSmall", render: simple(TaskIconSmall) },
280+
{ name: "TestTubeIcon", render: simple(TestTubeIcon) },
281+
{ name: "TextInlineIcon", render: simple(TextInlineIcon) },
282+
{ name: "TextWrapIcon", render: simple(TextWrapIcon) },
283+
{ name: "TimedOutIcon", render: simple(TimedOutIcon) },
284+
{ name: "ToggleArrowIcon", render: simple(ToggleArrowIcon) },
285+
{ name: "TraceIcon", render: simple(TraceIcon) },
286+
{ name: "TriggerIcon", render: simple(TriggerIcon) },
287+
{ name: "TwoTreesIcon", render: simple(TwoTreesIcon) },
288+
{ name: "UnarchiveIcon", render: simple(UnarchiveIcon) },
289+
{ name: "UserCrossIcon", render: simple(UserCrossIcon) },
290+
{ name: "UserGroupIcon", render: simple(UserGroupIcon) },
291+
{ name: "WaitpointTokenIcon", render: simple(WaitpointTokenIcon) },
292+
{
293+
name: "WarmStartIcon",
294+
render: (className) => <WarmStartIcon isWarmStart={false} className={className} />,
295+
},
296+
{ name: "WebhookIcon", render: simple(WebhookIcon) },
297+
{ name: "XAIIcon", render: simple(XAIIcon) },
298+
];
299+
300+
const sortedIcons = [...icons].sort((a, b) => a.name.localeCompare(b.name));
301+
302+
export default function Story() {
303+
return (
304+
<div className="flex flex-col gap-4 p-6">
305+
<div className="text-sm text-text-dimmed">
306+
{sortedIcons.length} custom icons, rendered at 24px.
307+
</div>
308+
<div className="grid grid-cols-[repeat(auto-fill,minmax(140px,1fr))] gap-2">
309+
{sortedIcons.map((icon) => (
310+
<div
311+
key={icon.name}
312+
className="flex flex-col items-center gap-3 rounded-md border border-grid-bright bg-background-bright p-4 text-text-bright"
313+
>
314+
<div className="flex h-6 w-6 items-center justify-center">
315+
{icon.render("size-6")}
316+
</div>
317+
<div
318+
className="w-full truncate text-center text-xs text-text-dimmed"
319+
title={icon.name}
320+
>
321+
{icon.name}
322+
</div>
323+
</div>
324+
))}
325+
</div>
326+
</div>
327+
);
328+
}

‎apps/webapp/app/routes/storybook/route.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,10 @@ const stories: Story[] = [
6060
name: "Free plan usage",
6161
slug: "free-plan-usage",
6262
},
63+
{
64+
name: "Icons",
65+
slug: "icons",
66+
},
6367
{
6468
name: "Info panel",
6569
slug: "info-panel",

0 commit comments

Comments
 (0)