4fef7ba5e2
* wip * wip * chore: remove unused import * feat: top banner component added * feat: top banner stories added * fix: icon bug * Update packages/ui/components/topbanner/TopBanner.tsx Co-authored-by: Omar López <zomars@me.com> * Apply suggestions from code review * Export fixes * Feedback * Type fixes * Fixes Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
33 lines
979 B
TypeScript
33 lines
979 B
TypeScript
import { classNames } from "@calcom/lib";
|
|
|
|
interface ExampleProps {
|
|
children: React.ReactNode;
|
|
title: string;
|
|
isFullWidth?: boolean;
|
|
}
|
|
export const Example = ({ children, title, isFullWidth = false }: ExampleProps) => {
|
|
return (
|
|
<div className={classNames("examples-item", isFullWidth && "w-full")}>
|
|
<span className={classNames("examples-item-title", isFullWidth && "mb-0 mt-2")}>{title}</span>
|
|
<div className="examples-item-content">{children}</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
interface ExamplesProps {
|
|
children: React.ReactNode;
|
|
title: string;
|
|
footnote?: React.ReactNode;
|
|
dark?: boolean;
|
|
}
|
|
|
|
export const Examples = ({ children, title, footnote = null, dark }: ExamplesProps) => {
|
|
return (
|
|
<div className={classNames("examples", dark && "dark")}>
|
|
<h2 className="examples-title">{title}</h2>
|
|
<div className="examples-content">{children}</div>
|
|
{!!footnote && <div className="examples-footnote">{footnote}</div>}
|
|
</div>
|
|
);
|
|
};
|