fleet/frontend/components/Card/Card.stories.tsx
Gabriel Hernandez 0f02fa012e
create a reusable UI card component (#12455)
I notices we were reusing styles alot for the card like container UI so
I created a reusable `Card` component

The component is used like this:

```tsx

// default card is white background
<Card>
  <p>whatever JSX you want</p>
</Card>

<Card color="gray">
  <p>whatever JSX you want</p>
</Card>

<Card color="yellow">
  <p>whatever JSX you want</p>
</Card>

<Card color="purple">
  <p>whatever JSX you want</p>
</Card>
```

**white**


![image](https://github.com/fleetdm/fleet/assets/1153709/53ee43a7-982b-480b-8bcf-0c585e0e01b5)

**gray**


![image](https://github.com/fleetdm/fleet/assets/1153709/5afa85df-d63f-4c5a-8f31-d7d6d9174862)

**yellow**


![image](https://github.com/fleetdm/fleet/assets/1153709/334291d6-c5af-4caa-adcb-b28696a054d7)

**purple**


![image](https://github.com/fleetdm/fleet/assets/1153709/0cc87478-f507-4c7f-9807-328e2384a8b1)

- [x] Manual QA for all new/changed functionality
2023-06-26 16:33:46 +01:00

18 lines
298 B
TypeScript

import { Meta, StoryObj } from "@storybook/react";
import Card from ".";
const meta: Meta<typeof Card> = {
component: Card,
title: "Components/Card",
args: {
children: "card content",
},
};
export default meta;
type Story = StoryObj<typeof Card>;
export const Default: Story = {};