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>
58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { type PropsWithChildren, useState } from "react";
|
|
|
|
import className from "@calcom/ui/classNames";
|
|
import { Button } from "@calcom/ui/components/button";
|
|
|
|
type Props = {
|
|
customCodeSnippet?: string;
|
|
className?: string;
|
|
};
|
|
|
|
export const RenderComponentWithSnippet: React.FC<PropsWithChildren<Props>> = (props) => {
|
|
const [open, setOpen] = useState(false);
|
|
// const snippet =
|
|
// props.customCodeSnippet ??
|
|
// reactElementToJSXString(props.children, {
|
|
// showFunctions: true,
|
|
// useBooleanShorthandSyntax: true,
|
|
|
|
// displayName: (node) => {
|
|
// // @ts-ignore
|
|
// return node?.type.displayName ?? node?.type ?? "Unknown";
|
|
// },
|
|
// });
|
|
return (
|
|
<div className="border-gray-6 bg-default rounded-lg border">
|
|
<div className={className("not-prose p-8 xl:p-12", props.className)}>{props.children}</div>
|
|
|
|
<div className="bg-gray-3 border-gray-6 flex items-center justify-start border-b border-t p-2">
|
|
<Button
|
|
color="minimal"
|
|
onClick={() => {
|
|
setOpen(!open);
|
|
}}>
|
|
Code (WIP)
|
|
</Button>
|
|
</div>
|
|
|
|
<div
|
|
className={className(
|
|
"bg-gray-2 max-h-96 w-full overflow-y-scroll transition-all",
|
|
open ? "block" : "hidden"
|
|
)}>
|
|
<div className="flex items-start">
|
|
{/* <pre className="py-0 text-gray-8 text-right">
|
|
{snippet
|
|
.split("\n")
|
|
.map((_line, i) => i + 1)
|
|
.join("\n")}
|
|
</pre>
|
|
<pre className="py-0 text-gray-12 w-full">{snippet}</pre> */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|