53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
import { ComponentMeta } from "@storybook/react";
|
|
import { Search } from "react-feather";
|
|
|
|
import { Button, PageHeader } from "@calcom/ui/v2";
|
|
import { TextField } from "@calcom/ui/v2/form";
|
|
|
|
export default {
|
|
title: "pattern/Page Header",
|
|
component: PageHeader,
|
|
decorators: [
|
|
(Story) => (
|
|
<div className="">
|
|
<Story />
|
|
</div>
|
|
),
|
|
],
|
|
} as ComponentMeta<typeof PageHeader>;
|
|
|
|
export const Default = () => (
|
|
<PageHeader title="Title" description="Some description about the header above" />
|
|
);
|
|
|
|
export const ButtonRight = () => (
|
|
<PageHeader
|
|
title="Title"
|
|
description="Some description about the header above"
|
|
rightAlignedComponent={<Button>Button Text</Button>}
|
|
/>
|
|
);
|
|
export const ComingSoon = () => (
|
|
<PageHeader
|
|
title="Title"
|
|
description="Some description about the header above"
|
|
badgeText="Coming Soon"
|
|
badgeVariant="gray"
|
|
/>
|
|
);
|
|
export const SearchInstalledApps = () => (
|
|
<PageHeader
|
|
title="Search booking"
|
|
description="See upcoming and past events booking through your event type link"
|
|
rightAlignedComponent={
|
|
<TextField
|
|
containerClassName="h-9 max-h-9"
|
|
addOnLeading={<Search />}
|
|
name="search"
|
|
labelSrOnly
|
|
placeholder="WIP"
|
|
/>
|
|
}
|
|
/>
|
|
);
|