docs: improve copy-text-morph example + docs + add size properties

Author: pheralb

apps/website/src/components/code-block/blocks/copy-text-morph.tsx

@@ -20,7 +20,7 @@ import { copyToClipboard } from "@/utils/copy";
 
 interface CopyTextAnimatedProps extends ComponentProps<"button"> {
   content: string;
-  iconSize?: number;
+  size?: "xs" | "sm";
 }
 
 export type TextMorphProps = {
@@ -94,6 +94,7 @@ export function TextMorph({
 
 const CopyTextMorph = ({
   content,
+  size = "sm",
   className,
   ...props
 }: CopyTextAnimatedProps) => {
@@ -119,9 +120,11 @@ const CopyTextMorph = ({
       className={cn(
         "cursor-pointer",
         "transition-colors duration-200 ease-in-out",
-        "text-xs text-neutral-700 dark:text-neutral-300 hover:text-neutral-950 dark:hover:text-neutral-50",
+        "text-neutral-700 hover:text-neutral-950 dark:text-neutral-300 dark:hover:text-neutral-50",
         "rounded-md bg-neutral-300/60 px-1.5 py-1 dark:bg-neutral-700/60",
         "border border-transparent hover:border-neutral-400/60 dark:hover:border-neutral-600/60",
+        size === "xs" && "text-xs",
+        size === "sm" && "text-sm",
         isCopied && "text-neutral-950 dark:text-neutral-50",
         className,
       )}

apps/website/src/components/previews/copy-text-morph-example.tsx

@@ -1,32 +1,11 @@
-import {
-  CodeBlock,
-  CodeBlockContent,
-  CodeBlockGroup,
-  CodeBlockHeader,
-  CodeBlockIcon,
-} from "@/components/code-block/code-block";
-import { CodeblockShiki } from "@/components/code-block/client/shiki";
 import { CopyTextMorph } from "@/components/code-block/blocks/copy-text-morph";
 
 const code = `export default function Page() {
   return <h1>Hello</h1>
 }`;
 
 const CopyMorphExample = () => {
-  return (
-    <CodeBlock>
-      <CodeBlockHeader>
-        <CodeBlockGroup>
-          <CodeBlockIcon language="tsx" />
-          <span>Copy with Text Morph</span>
-        </CodeBlockGroup>
-        <CopyTextMorph content={code} />
-      </CodeBlockHeader>
-      <CodeBlockContent>
-        <CodeblockShiki language="tsx" code={code} />
-      </CodeBlockContent>
-    </CodeBlock>
-  );
+  return <CopyTextMorph content={code} />;
 };
 
 export default CopyMorphExample;

apps/website/src/docs/react/blocks/copy-text-morph.mdx

@@ -1,14 +1,14 @@
 ---
 title: Copy with Text Morph
 description: Copy Button with animated text using Motion-Primitives.
-category: [React, Motion, Shiki, Blocks]
+category: [React, Motion, Client, Blocks]
 ---
 
 <ComponentPreview component="block-copy-text-morph" />
 
 ## Introduction
 
-In this block, we'll create a copy button that not only copies text to the clipboard but also provides animated feedback using [Motion-Primitives](https://motion-primitives.com/) created by [ibelick](https://github.com/ibelick).
+In this block, we'll create a copy button with animated text using [Motion-Primitives](https://motion-primitives.com/) by [Julien Thibeaut](https://github.com/ibelick). The button will morph between "Copy" and "Copied" when clicked, providing visual feedback to the user.
 
 ## Installation
 
@@ -74,3 +74,7 @@ const Example = () => {
 };
 export default Example;
 ```
+
+## Props
+
+<ShowProps component="block-copy-text-morph" />