From 7a715f9b593a27337dca89d6f75c5c6e9b0fc9d9 Mon Sep 17 00:00:00 2001 From: ariflogs Date: Tue, 15 Oct 2024 20:01:30 +0600 Subject: [PATCH] added coppy button --- components/CodeBlock.tsx | 50 ++++++++++++++++++++++++++++++++ components/ComponentShowcase.tsx | 7 +---- components/CopyButton.tsx | 49 ------------------------------- components/MDX.tsx | 19 +++--------- contentlayer.config.ts | 16 ++++------ types/unist.d.ts | 22 +++++++------- 6 files changed, 72 insertions(+), 91 deletions(-) create mode 100644 components/CodeBlock.tsx delete mode 100644 components/CopyButton.tsx diff --git a/components/CodeBlock.tsx b/components/CodeBlock.tsx new file mode 100644 index 0000000..59fbd50 --- /dev/null +++ b/components/CodeBlock.tsx @@ -0,0 +1,50 @@ +"use client"; + +import * as React from "react"; +import { cn } from "@/lib/utils"; +import { Button } from "@/packages/ui"; + +interface ICodeBlock extends React.HTMLAttributes {} + +export async function copyToClipboardWithMeta(value: string, event?: Event) { + navigator.clipboard.writeText(value); + if (event) { + // trackEvent(event); + } +} + +export function CodeBlock({ className, children, ...props }: ICodeBlock) { + const [hasCopied, setHasCopied] = React.useState(false); + const preRef = React.useRef(null); + + const handleClickCopy = async () => { + const code = preRef.current?.textContent; + if (code) { + setHasCopied(true); + await navigator.clipboard.writeText(code); + + setTimeout(() => { + setHasCopied(false); + }, 3000); + } + }; + return ( + 
+      
+      {children}
+
+ ); +} diff --git a/components/ComponentShowcase.tsx b/components/ComponentShowcase.tsx index 1177a39..507f732 100644 --- a/components/ComponentShowcase.tsx +++ b/components/ComponentShowcase.tsx @@ -1,8 +1,6 @@ import { componentConfig } from "@/config"; -import { H5 } from "@/packages/ui"; import { TabGroup, TabList, TabPanels, TabPanel, Tab } from "@headlessui/react"; import React, { HTMLAttributes } from "react"; -import { CopyButton } from "./CopyButton"; interface IComponentShowcase extends HTMLAttributes { name: keyof typeof componentConfig.examples; @@ -29,10 +27,7 @@ export function ComponentShowcase({ name, children }: IComponentShowcase) { -
- - {Code} -
+
{Code}
 diff --git a/components/CopyButton.tsx b/components/CopyButton.tsx deleted file mode 100644 index cfd65fb..0000000 --- a/components/CopyButton.tsx +++ /dev/null @@ -1,49 +0,0 @@ -"use client"; - -import * as React from "react"; -import { cn } from "@/lib/utils"; -import { Button, IButtonProps } from "@/packages/ui"; - -interface ICopyButtonProps extends IButtonProps { - value: string; - src?: string; -} - -export async function copyToClipboardWithMeta(value: string, event?: Event) { - navigator.clipboard.writeText(value); - if (event) { - // trackEvent(event); - } -} - -export function CopyButton({ - value, - className, - src, - ...props -}: ICopyButtonProps) { - const [hasCopied, setHasCopied] = React.useState(false); - - React.useEffect(() => { - setTimeout(() => { - setHasCopied(false); - }, 2000); - }, [hasCopied]); - - return ( - - ); -} diff --git a/components/MDX.tsx b/components/MDX.tsx index 5970d23..ec526e4 100644 --- a/components/MDX.tsx +++ b/components/MDX.tsx @@ -1,9 +1,12 @@ +"use client"; + import { H1, H2, H3, H4, H5, H6 } from "@/packages/ui"; import { useMDXComponent } from "next-contentlayer/hooks"; import React, { HTMLAttributes } from "react"; import { ComponentShowcase } from "./ComponentShowcase"; import { cn } from "@/lib/utils"; import { ComponentSource } from "./ComponentSource"; +import { CodeBlock } from "./CodeBlock"; const components = { h1: H1, @@ -18,21 +21,7 @@ const components = { ), h5: H5, h6: H6, - pre: ({ - className, - children, - ...props - }: React.HTMLAttributes) => ( - 
-      {children}
-
- ), + pre: CodeBlock, code: ({ className, children, diff --git a/contentlayer.config.ts b/contentlayer.config.ts index d408bcc..27591a4 100644 --- a/contentlayer.config.ts +++ b/contentlayer.config.ts @@ -47,7 +47,7 @@ export default makeSource({ u("element", { tagName: "pre", properties: { - __src__: source, + __src__: filePath, }, children: [ u("element", { @@ -65,6 +65,8 @@ export default makeSource({ ], }) ); + + return; } if (node.name === "ComponentShowcase" && node.attributes) { @@ -78,21 +80,13 @@ export default makeSource({ const component = componentConfig.examples[name]; const filePath = path.join(process.cwd(), component.filePath); const source = fs.readFileSync(filePath, "utf8"); - // const cleanedJSX = source - // .replace(/export default function \w+\(\) \{\n?/g, "") // removes function wrapper - // .replace(/return\s*\(\s*/g, "") // removes return statement - // .replace(/\n\s*\);?\s*\}\s*$/g, "") // Removes closing parenthesis, semicolon, and closing brace at the end of the function - // .replace(/\n\s*\n/g, "\n") // removes extra new lines - // .trim() - // .split("\n") - // .map((line) => line.replace(/^ {4}/gm, "")) - // .join("\n"); node.children?.push( u("element", { tagName: "pre", properties: { __src__: component.filePath, + __rawString__: source, }, children: [ u("element", { @@ -110,6 +104,8 @@ export default makeSource({ ], }) ); + + return; } }); return null; diff --git a/types/unist.d.ts b/types/unist.d.ts index 92a79c8..2f01d74 100644 --- a/types/unist.d.ts +++ b/types/unist.d.ts @@ -1,14 +1,14 @@ -import { Node } from "unist-builder" +import { Node } from "unist-builder"; export interface UnistNode extends Node { - type: string - name?: string - tagName?: string - value?: string + type: string; + name?: string; + tagName?: string; + value?: string; attributes?: { - name: string - value: unknown - type?: string - }[] - children?: UnistNode[] -} \ No newline at end of file + name: string; + value: unknown; + type?: string; + }[]; + children?: UnistNode[]; +}