80 lines
2.3 KiB
TypeScript
80 lines
2.3 KiB
TypeScript
import { ComponentMeta } from "@storybook/react";
|
|
import { useState } from "react";
|
|
|
|
import Card, { BaseCardProps } from "@calcom/ui/v2/core/Card";
|
|
|
|
export default {
|
|
title: "Cards",
|
|
component: Card,
|
|
} as ComponentMeta<typeof Card>;
|
|
|
|
const profileProps: BaseCardProps[] = [
|
|
{
|
|
variant: "ProfileCard",
|
|
title: "Alex Fisher",
|
|
image:
|
|
"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
|
|
description: "Co-founder at Attio. Book a meeting to discuss enterprise deals.",
|
|
},
|
|
{
|
|
variant: "ProfileCard",
|
|
title: "Julian Wan",
|
|
image:
|
|
"https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80",
|
|
description: "Co-founder at Attio. Book a meeting to discuss enterprise deals.",
|
|
},
|
|
];
|
|
|
|
export const Profile = () => {
|
|
return (
|
|
<div className="flex w-full space-x-2 bg-gray-200 p-4">
|
|
<Card {...profileProps[0]} />
|
|
<Card {...profileProps[1]} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const appStoreProps: BaseCardProps = {
|
|
variant: "AppStore",
|
|
title: "Giphy",
|
|
image: "https://app.cal.com/api/app-store/giphy/icon.svg",
|
|
description: "Add GIFs to spice up your booking confirmations.",
|
|
actionButton: {
|
|
href: "#",
|
|
child: "View Details",
|
|
},
|
|
};
|
|
|
|
export const AppStore = () => {
|
|
return (
|
|
<div className="w-full bg-gray-200 p-4">
|
|
<Card {...appStoreProps} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const sidebarCardProps: BaseCardProps = {
|
|
variant: "SidebarCard",
|
|
thumbnailUrl: "https://img.youtube.com/vi/60HJt8DOVNo/0.jpg",
|
|
mediaLink: "https://www.youtube.com/watch?v=60HJt8DOVNo",
|
|
title: "Dynamic boooking links",
|
|
description: "Booking link that allows people to quickly schedule meetings.",
|
|
learnMore: {
|
|
href: "https://cal.com/blog/cal-v-1-9",
|
|
text: "Learn more",
|
|
},
|
|
};
|
|
|
|
export const SidebarCard = () => {
|
|
const [visible, setVisible] = useState(true); // save state in localStorage, cookie or db
|
|
return (
|
|
<header className="w-full max-w-[225px] bg-gray-100 p-3">
|
|
{visible && (
|
|
<div>
|
|
<Card {...sidebarCardProps} actionButton={{ onClick: () => setVisible(false), child: "Dismiss" }} />
|
|
</div>
|
|
)}
|
|
</header>
|
|
);
|
|
};
|