Docs: Improved docs with copy code component

Author: StDensity

docs/app/docs/contributing/contributing-to-rad-ui/page.tsx

@@ -5,6 +5,7 @@ import Code from "@radui/ui/Code"
 import Button from "@radui/ui/Button"
 
 import StarButton from "./StarButton"
+import CodeWithCopy from "@/components/CodeWithCopy"
 
 
 
@@ -61,31 +62,31 @@ const ContributingToRadUI = () => {
             </Text>
             <div className='space-y-4 mt-5'>
                 <Text>
-                    For Fixes : <Code>git commit -m "Fix: {SAMPLE_COMMIT_MESSAGE}"</Code>
+                    For Fixes : <CodeWithCopy code={`git commit -m "Fix: ${SAMPLE_COMMIT_MESSAGE}`} />
                 </Text>
                 <Text>
-                    For Features : <Code>git commit -m "Feature: {SAMPLE_COMMIT_MESSAGE}"</Code>
+                    For Features :  <CodeWithCopy code={`git commit -m "Feature: ${SAMPLE_COMMIT_MESSAGE}`} /> 
                 </Text>
                 <Text>
-                    For Documentation : <Code>git commit -m "Docs: {SAMPLE_COMMIT_MESSAGE}"</Code>
+                    For Documentation : <CodeWithCopy code={`git commit -m "Docs: ${SAMPLE_COMMIT_MESSAGE}"`} />
                 </Text>
                 <Text>
-                    For Refactoring : <Code>git commit -m "Refactor: {SAMPLE_COMMIT_MESSAGE}"</Code>
+                    For Refactoring : <CodeWithCopy code={`git commit -m "Refactor: ${SAMPLE_COMMIT_MESSAGE}"`} />
                 </Text>
                 <Text>
-                    For Chore : <Code>git commit -m "Chore: {SAMPLE_COMMIT_MESSAGE}"</Code>
+                    For Chore : <CodeWithCopy code={`git commit -m "Chore: ${SAMPLE_COMMIT_MESSAGE}"`} />
                 </Text>
                 <Text>
-                    For Style : <Code>git commit -m "Style: {SAMPLE_COMMIT_MESSAGE}"</Code>
+                    For Style : <CodeWithCopy code={`git commit -m "Style: ${SAMPLE_COMMIT_MESSAGE}"`} />
                 </Text>
                 <Text>
-                    For Performance : <Code>git commit -m "Performance: {SAMPLE_COMMIT_MESSAGE}"</Code>
+                    For Performance : <CodeWithCopy code={`git commit -m "Performance: ${SAMPLE_COMMIT_MESSAGE}"`} />
                 </Text>
                 <Text>
-                    For Test : <Code>git commit -m "Test: {SAMPLE_COMMIT_MESSAGE}"</Code>
+                    For Test : <CodeWithCopy code={`git commit -m "Test: ${SAMPLE_COMMIT_MESSAGE}"`} />
                 </Text>
                 <Text>
-                    For CI : <Code>git commit -m "CI: {SAMPLE_COMMIT_MESSAGE}"</Code>
+                    For CI : <CodeWithCopy code={`git commit -m "CI: ${SAMPLE_COMMIT_MESSAGE}"`} />
                 </Text>
             </div>
         </Documentation.Section>

docs/app/docs/contributing/setting-up-dev-environment/page.tsx

@@ -3,7 +3,7 @@ import Link from "@radui/ui/Link"
 import Code from "@radui/ui/Code"
 import Em from "@radui/ui/Em"
 import Strong from "@radui/ui/Strong"
-
+import CodeWithCopy from "@/components/CodeWithCopy"
 
 const PAGE_NAME = 'BEFORE_YOU_START'
 
@@ -24,7 +24,7 @@ const SettingUpDevEnvironment = () => {
                     <Strong className="text-gray-1000">Clone the repository:</Strong> Clone your forked repository to your local machine.
                 </li>
                 <li>
-                    <Strong className="text-gray-1000">Install dependencies:</Strong> Run <Code>npm install</Code> in the root directory. We use npm to maintain consistency in our dependencies.
+                    <Strong className="text-gray-1000">Install dependencies:</Strong> Run <CodeWithCopy code={"npm install"} /> in the root directory. We use npm to maintain consistency in our dependencies.
                 </li>
             </ul>
         </Documentation.Section>
@@ -56,7 +56,7 @@ const SettingUpDevEnvironment = () => {
                 We use Storybook for component development and testing. You can explore our existing components and work-in-progress features in the WIP section. Storybook is essential for developing and testing new components.
             </Text>
             <Text className="mb-4 text-gray-1000 font-light">
-                To start Storybook, run <Code>npm run sb</Code> in the root directory.
+                To start Storybook, run <CodeWithCopy code={"npm run sb"} /> in the root directory.
             </Text>
         </Documentation.Section>
 
@@ -65,10 +65,10 @@ const SettingUpDevEnvironment = () => {
                 To work on the documentation website, you'll need to run the development server. This is necessary for updating existing documentation, adding new pages, or modifying components.
             </Text>
             <Text className="mb-4 text-gray-1000 font-light">
-                First, navigate to the docs directory: <Code>cd docs</Code>
+                First, navigate to the docs directory: <CodeWithCopy code={"cd docs"} /> 
             </Text>
             <Text className="mb-4 text-gray-1000 font-light">
-                Then start the Next.js development server: <Code>npm run dev</Code>
+                Then start the Next.js development server: <CodeWithCopy code={"npm run dev"} />
             </Text>
         </Documentation.Section>
     </Documentation>

docs/app/docs/first-steps/installation/page.js

@@ -5,7 +5,7 @@ import Heading from "@radui/ui/Heading"
 import Link from "@radui/ui/Link"
 import Code from "@radui/ui/Code"
 import Copy from "@/components/Copy"
-
+import CodeWithCopy from "@/components/CodeWithCopy"
 
 const PAGE_NAME = 'INSTALLATION'
 import SEO from "../../docsIndex"
@@ -24,23 +24,10 @@ const Introduction = () => {
             </Text>
 
             <Text className="my-2 font-medium">Using Yarn</Text>
-            <Code>
-               <span  className="flex items-center">
-                <span className="mr-2">
-                yarn add @radui/ui
-                    </span>
-                    <Copy content="yarn add @radui/ui" />
-               </span>
-            </Code>
+            <CodeWithCopy code={`yarn add @radui/ui`} />
+            
             <Text className="mt-4 mb-1 font-medium">Using npm</Text>
-            <Code>
-               <span  className="flex items-center">
-                <span className="mr-2">
-                        npm install @radui/ui --save
-                    </span>
-                    <Copy content="npm install @radui/ui --save" />
-               </span>
-            </Code>
+            <CodeWithCopy code={`npm install @radui/ui --save`} />
         </Documentation.Section>
     </Documentation>
 

docs/components/CodeWithCopy.js

@@ -5,7 +5,7 @@ import Tooltip from "@radui/ui/Tooltip";
 const CodeWithCopy = ({ code }) => {
   const copyContent = code
     .replace(/\n{2,}/g, "\n") // Replace multiple newlines with single newline
-    .trim();
+    .trim(); // Remove leading/trailing whitespace
 
   return (
     <Code>