wehub-resource-sync
76 lines
3.1 KiB
TypeScript
76 lines
3.1 KiB
TypeScript
import { useState } from "react";
|
|
import { Button } from "~/components/primitives/Buttons";
|
|
import { CheckboxWithLabel } from "~/components/primitives/Checkbox";
|
|
|
|
export default function Story() {
|
|
const [isDisabled, setIsDisabled] = useState(false);
|
|
|
|
return (
|
|
<div className="flex flex-col items-start gap-y-8 p-8">
|
|
<Button
|
|
onClick={() => setIsDisabled((d) => !d)}
|
|
variant="primary/medium"
|
|
className="max-w-fit"
|
|
>
|
|
{isDisabled ? "Enable checkboxes" : "Disable checkboxes"}
|
|
</Button>
|
|
<CheckboxWithLabel
|
|
name="Simple checkbox"
|
|
id="check1"
|
|
variant="simple/small"
|
|
label="This is a simple small checkbox"
|
|
disabled={isDisabled}
|
|
/>
|
|
<CheckboxWithLabel
|
|
name="Simple checkbox"
|
|
id="check1"
|
|
variant="simple"
|
|
label="This is a simple checkbox"
|
|
disabled={isDisabled}
|
|
/>
|
|
<CheckboxWithLabel
|
|
name="Button checkbox"
|
|
id="check2"
|
|
variant="button"
|
|
label="This is a button checkbox"
|
|
disabled={isDisabled}
|
|
/>
|
|
<CheckboxWithLabel
|
|
name="Button checkbox"
|
|
id="check2"
|
|
variant="button"
|
|
label="This is a button checkbox with a badge"
|
|
badges={["This is a badge"]}
|
|
disabled={isDisabled}
|
|
/>
|
|
<CheckboxWithLabel
|
|
name="Button checkbox"
|
|
id="check2"
|
|
variant="button"
|
|
defaultChecked
|
|
label="This is a button checkbox that's default checked"
|
|
disabled={isDisabled}
|
|
/>
|
|
<div className="flex flex-col gap-y-0.5 overflow-hidden rounded-md">
|
|
<CheckboxWithLabel
|
|
name="Description checkbox"
|
|
id="check3"
|
|
variant="description"
|
|
badges={["This is a badge"]}
|
|
label="This is a checkbox with a description and badge"
|
|
description="This is a long checkbox description that goes full width. Grants full access to public and private repositories including read and write access to code, commit statuses, repository invitations, collaborators, deployment statuses, and repository webhooks. Note: In addition to repository related resources, the repo scope also grants access to manage organization-owned resources including projects, invitations, team memberships and webhooks. This scope also grants the ability to manage projects owned by users."
|
|
disabled={isDisabled}
|
|
/>
|
|
<CheckboxWithLabel
|
|
name="Description checkbox"
|
|
id="check4"
|
|
variant="description"
|
|
label="This is a checkbox with a description"
|
|
description="This is a long checkbox description that goes full width. Grants full access to public and private repositories including read and write access to code, commit statuses, repository invitations, collaborators, deployment statuses, and repository webhooks. Note: In addition to repository related resources, the repo scope also grants access to manage organization-owned resources including projects, invitations, team memberships and webhooks. This scope also grants the ability to manage projects owned by users."
|
|
disabled={isDisabled}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|