073faf9e10
* section component * more section UI * wip * core components styled * all components using sections * match icons to figma * small inputs * fix select small to be the same as small text * center flex rows * enforce inputs to be full spanning grid * tidy up section container for single inputs * fix select and i18n * wip * install available apps * raw heading * app install card * fix app logos width x height * fix gap * match design for other button * fix prop name * push i18n string * fix doc snippets * fix docs * chore: remove yarn.lock changes --------- Co-authored-by: Udit Takkar <udit222001@gmail.com>
59 lines
1.5 KiB
TypeScript
59 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { RenderComponentWithSnippet } from "@/app/components/render";
|
|
import { useState } from "react";
|
|
|
|
import { Switch } from "@calcom/ui/components/form";
|
|
import { Section } from "@calcom/ui/components/section";
|
|
|
|
export const BasicExample = () => {
|
|
const [isOpen, setIsOpen] = useState(true);
|
|
|
|
return (
|
|
<RenderComponentWithSnippet>
|
|
<Section>
|
|
<Section.Header
|
|
title="Basic Section"
|
|
description="This is a basic section with a title and description">
|
|
<Switch size="sm" checked={isOpen} onCheckedChange={setIsOpen} />
|
|
</Section.Header>
|
|
{isOpen && (
|
|
<Section.Content>
|
|
<p>This is the main content of the section.</p>
|
|
</Section.Content>
|
|
)}
|
|
</Section>
|
|
</RenderComponentWithSnippet>
|
|
);
|
|
};
|
|
|
|
export const BasicExampleSnippet = `
|
|
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Section } from "@calcom/ui/components/section";
|
|
import { Switch } from "@calcom/ui/components/form";
|
|
|
|
const BasicSection = () => {
|
|
const [isOpen, setIsOpen] = useState(true);
|
|
|
|
return (
|
|
<Section>
|
|
<Section.Header
|
|
title="Basic Section"
|
|
description="This is a basic section with a title and description"
|
|
>
|
|
<Section.HeaderRight>
|
|
<Switch size="sm" checked={isOpen} onCheckedChange={setIsOpen} />
|
|
</Section.HeaderRight>
|
|
</Section.Header>
|
|
{isOpen && (
|
|
<Section.Content>
|
|
<p>This is the main content of the section.</p>
|
|
</Section.Content>
|
|
)}
|
|
</Section>
|
|
);
|
|
};
|
|
`;
|