You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
import React from "react";
|
|
import type { Meta, StoryObj } from "@storybook/react";
|
|
import * as Card from "./Card";
|
|
import { Box } from "../Box";
|
|
import { Input } from "../Input";
|
|
import { Button } from "../Button";
|
|
import { cx } from "../../utils";
|
|
|
|
const meta: Meta<typeof Card.$> = {
|
|
title: "UI/Card",
|
|
component: Card.$,
|
|
};
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof Card>;
|
|
|
|
export const Default: Story = {
|
|
render: () => (
|
|
<Box className={cx(["w-96"])}>
|
|
<Card.$ paddless>
|
|
<Card.Header>
|
|
<Card.Title>Create account</Card.Title>
|
|
<Card.Description>
|
|
Manage all your transactions in one place.
|
|
</Card.Description>
|
|
</Card.Header>
|
|
<Card.Body>
|
|
<form onSubmit={(event) => event.preventDefault()}>
|
|
<Input label="Name" fullWidth />
|
|
|
|
<Box className={cx(["py-2"])} />
|
|
|
|
<Input label="Type" fullWidth />
|
|
|
|
<Box className={cx(["py-2"])} />
|
|
|
|
<Input label="Balance" money fullWidth />
|
|
</form>
|
|
</Card.Body>
|
|
<Card.Footer className={cx(["flex", "justify-between"])}>
|
|
<Button>Cancel</Button>
|
|
<Button intent="primary">Save</Button>
|
|
</Card.Footer>
|
|
</Card.$>
|
|
</Box>
|
|
),
|
|
};
|
|
|
|
// Another way to use this component alone is to import the named export
|
|
// import { Card } from './Card';
|
|
export const Paddless: Story = {
|
|
render: () => (
|
|
<Box className={cx(["w-96"])}>
|
|
<Card.$>
|
|
<p>Dummy content while we create the input components.</p>
|
|
</Card.$>
|
|
</Box>
|
|
),
|
|
};
|