Example updated

themesberg · Jun 3, 2024 · 0b44dc2 · 0b44dc2
1 parent cbc4b58
commit 0b44dc2
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 44 deletions.
diff --git a/apps/web/examples/clipboard/clipboard.withIcon.tsx b/apps/web/examples/clipboard/clipboard.withIcon.tsx
@@ -10,37 +10,43 @@ import { Clipboard } from "flowbite-react"
 
 export function Component() {
   return (
-    <div className="grid w-full max-w-[23rem] grid-cols-8 gap-2">
+    <div className="grid w-full max-w-64">
+      <div className="relative">
         <label htmlFor="npm-install" className="sr-only">
-            Label
+          Label
         </label>
-        <input id="npm-install" type="text"
-            className="col-span-6 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-500 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:placeholder:text-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
-            value="npm install flowbite-react"
-            disabled
-            readOnly
-            />
-         <Clipboard.WithIcon valueToCopy="npm install flowbite-react" />
+        <input
+          id="npm-install"
+          type="text"
+          className="col-span-6 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-500 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:placeholder:text-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+          value="npm install flowbite-react"
+          disabled
+          readOnly
+        />
+        <Clipboard.WithIcon valueToCopy="npm install flowbite-react" />
+      </div>
     </div>
   )
 }
 `;
 
 export function Component() {
   return (
-    <div className="grid w-full max-w-[23rem] grid-cols-8 gap-2">
-      <label htmlFor="npm-install" className="sr-only">
-        Label
-      </label>
-      <input
-        id="npm-install"
-        type="text"
-        className="col-span-6 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-500 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:placeholder:text-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
-        value="npm install flowbite-react"
-        disabled
-        readOnly
-      />
-      <Clipboard.WithIcon valueToCopy="npm install flowbite-react" />
+    <div className="grid w-full max-w-64">
+      <div className="relative">
+        <label htmlFor="npm-install" className="sr-only">
+          Label
+        </label>
+        <input
+          id="npm-install"
+          type="text"
+          className="col-span-6 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-500 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:placeholder:text-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+          value="npm install flowbite-react"
+          disabled
+          readOnly
+        />
+        <Clipboard.WithIcon valueToCopy="npm install flowbite-react" />
+      </div>
     </div>
   );
 }

diff --git a/apps/web/examples/clipboard/clipboard.withIconText.tsx b/apps/web/examples/clipboard/clipboard.withIconText.tsx
@@ -10,37 +10,43 @@ import { Clipboard } from "flowbite-react"
 
 export function Component() {
   return (
-    <div className="grid w-full max-w-[23rem] grid-cols-8 gap-2">
+    <div className="grid w-full max-w-80">
+      <div className="relative">
         <label htmlFor="npm-install" className="sr-only">
-            Label
+          Label
         </label>
-        <input id="npm-install" type="text"
-            className="col-span-6 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-500 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:placeholder:text-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
-            value="npm install flowbite-react"
-            disabled
-            readOnly
-            />
-         <Clipboard.WithIconText valueToCopy="npm install flowbite-react" />
+        <input
+          id="npm-install"
+          type="text"
+          className="col-span-6 block w-full rounded-lg border border-gray-300 bg-gray-50 px-2.5 py-4 text-sm text-gray-500 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:placeholder:text-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+          value="npm install flowbite-react"
+          disabled
+          readOnly
+        />
+        <Clipboard.WithIconText valueToCopy="npm install flowbite-react" />
+      </div>
     </div>
   )
 }
 `;
 
 export function Component() {
   return (
-    <div className="grid w-full max-w-[23rem] grid-cols-8 gap-2">
-      <label htmlFor="npm-install" className="sr-only">
-        Label
-      </label>
-      <input
-        id="npm-install"
-        type="text"
-        className="col-span-6 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-500 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:placeholder:text-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
-        value="npm install flowbite-react"
-        disabled
-        readOnly
-      />
-      <Clipboard.WithIconText valueToCopy="npm install flowbite-react" />
+    <div className="grid w-full max-w-80">
+      <div className="relative">
+        <label htmlFor="npm-install" className="sr-only">
+          Label
+        </label>
+        <input
+          id="npm-install"
+          type="text"
+          className="col-span-6 block w-full rounded-lg border border-gray-300 bg-gray-50 px-2.5 py-4 text-sm text-gray-500 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:placeholder:text-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+          value="npm install flowbite-react"
+          disabled
+          readOnly
+        />
+        <Clipboard.WithIconText valueToCopy="npm install flowbite-react" />
+      </div>
     </div>
   );
 }