Files
community-rule/stories/sections/Groups.stories.js
T
2026-05-17 21:41:54 -06:00

94 lines
2.4 KiB
JavaScript

import Groups from "../../app/components/sections/Groups";
const vectorIconSrc = [
"/assets/vector/worker-coop.svg",
"/assets/vector/mutual-aid.svg",
"/assets/vector/open-source.svg",
"/assets/vector/dao.svg",
];
const sampleItems = [
{
icon: (
<img
alt=""
aria-hidden
className="inline-block size-9 object-contain"
height={36}
src={vectorIconSrc[0]}
width={36}
/>
),
title: "Worker's cooperatives",
description:
"Employee-owned businesses often need to clarify how power is shared, decisions are made, and how processes operate within their organizations.",
},
{
icon: (
<img
alt=""
aria-hidden
className="inline-block size-9 object-contain"
height={36}
src={vectorIconSrc[1]}
width={36}
/>
),
title: "Mutual aid groups",
description:
"Mutual aid groups must define how resources are shared, decisions are made, and volunteer coordination operates within their organizations.",
},
{
icon: (
<img
alt=""
aria-hidden
className="inline-block size-9 object-contain"
height={36}
src={vectorIconSrc[2]}
width={36}
/>
),
title: "Open source projects",
description:
"Agree to how contributions are managed, technical decisions are made, and community participation operates within their development communities.",
},
{
icon: (
<img
alt=""
aria-hidden
className="inline-block size-9 object-contain"
height={36}
src={vectorIconSrc[3]}
width={36}
/>
),
title: "DAOs",
description:
"Document token-based voting process, proposal patterns, and how community governance operates within their blockchain ecosystems.",
},
];
export default {
title: "Components/Sections/Groups",
component: Groups,
parameters: {
layout: "fullscreen",
docs: {
description: {
component:
"Figma **Section** (**[22084-859062](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22084-859062&m=dev)**) — baseline stacked cards; **md+** `22084-859470` hairline grid. **`cards/Icon`** tiles (body **12px/16px** from **`lg`**).",
},
},
},
tags: ["autodocs"],
};
export const Default = {
args: {
title: "Who is this for?",
items: sampleItems,
},
};