wehub-resource-sync
196 lines
8.5 KiB
TypeScript
196 lines
8.5 KiB
TypeScript
import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
|
|
import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
|
|
import { ClipboardField } from "~/components/primitives/ClipboardField";
|
|
import { Header2 } from "~/components/primitives/Headers";
|
|
import { Paragraph } from "~/components/primitives/Paragraph";
|
|
|
|
export default function Story() {
|
|
return (
|
|
<div className="flex gap-x-8 p-8">
|
|
<div className="flex flex-col items-start whitespace-nowrap">
|
|
<Header2 className="mb-[2.2rem]">Variants</Header2>
|
|
<div className="mb-10 space-y-[2.33rem]">
|
|
<Paragraph variant="small/bright">primary/small</Paragraph>
|
|
<Paragraph variant="small/bright">secondary/small</Paragraph>
|
|
<Paragraph variant="small/bright">tertiary/small</Paragraph>
|
|
<Paragraph variant="small/bright">tertiary/small + LeadingIcon</Paragraph>
|
|
<Paragraph variant="small/bright">tertiary/small + LeadingIcon</Paragraph>
|
|
<Paragraph variant="small/bright">primary/small + iconButton</Paragraph>
|
|
<Paragraph variant="small/bright">secondary/small + iconButton</Paragraph>
|
|
<Paragraph variant="small/bright">tertiary/small + iconButton</Paragraph>
|
|
</div>
|
|
<div className="space-y-[2.9rem]">
|
|
<Paragraph variant="small/bright">primary/medium</Paragraph>
|
|
<Paragraph variant="small/bright">secondary/medium</Paragraph>
|
|
<Paragraph variant="small/bright">tertiary/medium</Paragraph>
|
|
<Paragraph variant="small/bright">tertiary/medium + LeadingIcon</Paragraph>
|
|
<Paragraph variant="small/bright">tertiary/medium + LeadingIcon</Paragraph>
|
|
<Paragraph variant="small/bright">primary/medium + iconButton</Paragraph>
|
|
<Paragraph variant="small/bright">secondary/medium + iconButton</Paragraph>
|
|
<Paragraph variant="small/bright">tertiary/medium + iconButton</Paragraph>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col items-start gap-y-8">
|
|
<Header2>Default</Header2>
|
|
<ClipboardField value="copy paste me" variant="primary/small" />
|
|
<ClipboardField value="copy paste me" variant="secondary/small" />
|
|
<ClipboardField value="copy paste me" variant="tertiary/small" />
|
|
<ClipboardField
|
|
value="with leadingIcon"
|
|
variant="tertiary/small"
|
|
icon={<EnvironmentLabel environment={{ type: "DEVELOPMENT" }} />}
|
|
/>
|
|
<ClipboardField
|
|
value="with leadingIcon"
|
|
variant="tertiary/small"
|
|
icon={<MagnifyingGlassIcon className="size-4" />}
|
|
/>
|
|
<ClipboardField value="with iconButton" variant="primary/small" iconButton />
|
|
<ClipboardField value="with iconButton" variant="secondary/small" iconButton />
|
|
<ClipboardField value="with iconButton" variant="tertiary/small" iconButton />
|
|
<ClipboardField value="copy paste me" variant="primary/medium" />
|
|
<ClipboardField value="copy paste me" variant="secondary/medium" />
|
|
<ClipboardField value="copy paste me" variant="tertiary/medium" />
|
|
<ClipboardField
|
|
value="with leadingIcon"
|
|
variant="tertiary/medium"
|
|
icon={<EnvironmentLabel environment={{ type: "DEVELOPMENT" }} />}
|
|
/>
|
|
<ClipboardField
|
|
value="with leadingIcon"
|
|
variant="tertiary/medium"
|
|
icon={<MagnifyingGlassIcon className="size-4" />}
|
|
/>
|
|
<ClipboardField value="with iconButton" variant="primary/medium" iconButton />
|
|
<ClipboardField value="with iconButton" variant="secondary/medium" iconButton />
|
|
<ClipboardField value="with iconButton" variant="tertiary/medium" iconButton />
|
|
</div>
|
|
<div className="flex flex-col items-start gap-y-8">
|
|
<Header2>Secure value</Header2>
|
|
<ClipboardField value="copy paste me" variant="primary/small" secure={true} />
|
|
<ClipboardField value="copy paste me" variant="secondary/small" secure={true} />
|
|
<ClipboardField value="copy paste me" variant="tertiary/small" secure={true} />
|
|
<ClipboardField
|
|
value="with leadingIcon"
|
|
variant="tertiary/small"
|
|
secure={true}
|
|
icon={<EnvironmentLabel environment={{ type: "STAGING" }} />}
|
|
/>
|
|
<ClipboardField
|
|
value="with leadingIcon"
|
|
variant="tertiary/small"
|
|
icon={<MagnifyingGlassIcon className="size-4" />}
|
|
secure={true}
|
|
/>
|
|
<ClipboardField value="with iconButton" variant="primary/small" iconButton secure={true} />
|
|
<ClipboardField
|
|
value="with iconButton"
|
|
variant="secondary/small"
|
|
iconButton
|
|
secure={true}
|
|
/>
|
|
<ClipboardField value="with iconButton" variant="tertiary/small" iconButton secure={true} />
|
|
{/* Medium size */}
|
|
<ClipboardField value="copy paste me" variant="primary/medium" secure={true} />
|
|
<ClipboardField value="copy paste me" variant="secondary/medium" secure={true} />
|
|
<ClipboardField value="copy paste me" variant="tertiary/medium" secure={true} />
|
|
<ClipboardField
|
|
value="with leadingIcon"
|
|
variant="tertiary/medium"
|
|
icon={<EnvironmentLabel environment={{ type: "STAGING" }} />}
|
|
secure={true}
|
|
/>
|
|
<ClipboardField
|
|
value="with leadingIcon"
|
|
variant="tertiary/medium"
|
|
icon={<MagnifyingGlassIcon className="size-4" />}
|
|
secure={true}
|
|
/>
|
|
<ClipboardField value="with iconButton" variant="primary/medium" iconButton secure={true} />
|
|
<ClipboardField
|
|
value="with iconButton"
|
|
variant="secondary/medium"
|
|
iconButton
|
|
secure={true}
|
|
/>
|
|
<ClipboardField
|
|
value="with iconButton"
|
|
variant="tertiary/medium"
|
|
iconButton
|
|
secure={true}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col items-start gap-y-8">
|
|
<Header2>Custom secure value</Header2>
|
|
<ClipboardField value="npx abcdefghi" variant="primary/small" secure="npx ••••••••" />
|
|
<ClipboardField value="npx abcdefghi" variant="secondary/small" secure="npx ••••••••" />
|
|
<ClipboardField value="npx abcdefghi" variant="tertiary/small" secure="npx ••••••••" />
|
|
<ClipboardField
|
|
value="npx abcdefghi"
|
|
variant="tertiary/small"
|
|
icon={<EnvironmentLabel environment={{ type: "PRODUCTION" }} />}
|
|
secure="npx ••••••••"
|
|
/>
|
|
<ClipboardField
|
|
value="npx abcdefghi"
|
|
variant="tertiary/small"
|
|
icon={<MagnifyingGlassIcon className="size-4" />}
|
|
secure="npx ••••••••"
|
|
/>
|
|
<ClipboardField
|
|
value="npx abcdefghi"
|
|
variant="primary/small"
|
|
iconButton
|
|
secure="npx ••••••••"
|
|
/>
|
|
<ClipboardField
|
|
value="npx abcdefghi"
|
|
variant="secondary/small"
|
|
iconButton
|
|
secure="npx ••••••••"
|
|
/>
|
|
<ClipboardField
|
|
value="npx abcdefghi"
|
|
variant="tertiary/small"
|
|
iconButton
|
|
secure="npx ••••••••"
|
|
/>
|
|
{/* Medium size */}
|
|
<ClipboardField value="npx abcdefghi" variant="primary/medium" secure="npx ••••••••" />
|
|
<ClipboardField value="npx abcdefghi" variant="secondary/medium" secure="npx ••••••••" />
|
|
<ClipboardField value="npx abcdefghi" variant="tertiary/medium" secure="npx ••••••••" />
|
|
<ClipboardField
|
|
value="npx abcdefghi"
|
|
variant="tertiary/medium"
|
|
icon={<EnvironmentLabel environment={{ type: "PRODUCTION" }} />}
|
|
secure="npx ••••••••"
|
|
/>
|
|
<ClipboardField
|
|
value="npx abcdefghi"
|
|
variant="tertiary/medium"
|
|
icon={<MagnifyingGlassIcon className="size-4" />}
|
|
secure="npx ••••••••"
|
|
/>
|
|
<ClipboardField
|
|
value="npx abcdefghi"
|
|
variant="primary/medium"
|
|
iconButton
|
|
secure="npx ••••••••"
|
|
/>
|
|
<ClipboardField
|
|
value="npx abcdefghi"
|
|
variant="secondary/medium"
|
|
iconButton
|
|
secure="npx ••••••••"
|
|
/>
|
|
<ClipboardField
|
|
value="npx abcdefghi"
|
|
variant="tertiary/medium"
|
|
iconButton
|
|
secure="npx ••••••••"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|