From a7b6231267e76a50d3f72715c047e9d13ae33e4a Mon Sep 17 00:00:00 2001
From: SutuSebastian <sebiitv@gmail.com>
Date: Wed, 19 Jun 2024 16:45:43 +0300
Subject: [PATCH] fix: docs `HR` examples

---
 apps/web/examples/hr/hr.icon.tsx         | 46 +++++++++++++++---------
 apps/web/examples/hr/hr.root.tsx         | 36 ++++++++-----------
 apps/web/examples/hr/hr.square.tsx       | 46 +++++++++++++++---------
 apps/web/examples/hr/hr.text.tsx         | 46 +++++++++++++++---------
 apps/web/examples/hr/hr.trimmed.tsx      | 42 ++++++++++++++--------
 packages/ui/src/components/HR/HRIcon.tsx |  8 ++---
 6 files changed, 132 insertions(+), 92 deletions(-)

diff --git a/apps/web/examples/hr/hr.icon.tsx b/apps/web/examples/hr/hr.icon.tsx
index 598c5dc31..3d5ef6fdc 100644
--- a/apps/web/examples/hr/hr.icon.tsx
+++ b/apps/web/examples/hr/hr.icon.tsx
@@ -2,32 +2,46 @@ import { HRIcon } from "flowbite-react";
 import type { CodeData } from "~/components/code-demo";
 
 const code = `
-"use client";
-
 import { HR } from "flowbite-react";
 
 function Component() {
   return (
-    <p className="text-gray-500 dark:text-gray-400">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
-        
-    <HR.Icon />
-        
-    <p className="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
-  )
+    <>
+      <p className="text-gray-500 dark:text-gray-400">
+        Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest
+        data from other software development tools, so your IT support and operations teams have richer contextual
+        information to rapidly respond to requests, incidents, and changes.
+      </p>
+      <HR.Icon />
+      <p className="text-gray-500 dark:text-gray-400">
+        Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
+        critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
+        change.
+      </p>
+    </>
+  );
 }
 `;
 
 const codeRSC = `
-import { HRTrimmed } from "flowbite-react";
+import { HRIcon } from "flowbite-react";
 
 function Component() {
   return (
-    <p className="text-gray-500 dark:text-gray-400">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
-        
-    <HRIcon />
-        
-    <p className="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
-  )
+    <>
+      <p className="text-gray-500 dark:text-gray-400">
+        Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest
+        data from other software development tools, so your IT support and operations teams have richer contextual
+        information to rapidly respond to requests, incidents, and changes.
+      </p>
+      <HRIcon />
+      <p className="text-gray-500 dark:text-gray-400">
+        Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
+        critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
+        change.
+      </p>
+    </>
+  );
 }
 `;
 
@@ -39,9 +53,7 @@ function Component() {
         data from other software development tools, so your IT support and operations teams have richer contextual
         information to rapidly respond to requests, incidents, and changes.
       </p>
-
       <HRIcon />
-
       <p className="text-gray-500 dark:text-gray-400">
         Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
         critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
diff --git a/apps/web/examples/hr/hr.root.tsx b/apps/web/examples/hr/hr.root.tsx
index e42792c36..26d21a926 100644
--- a/apps/web/examples/hr/hr.root.tsx
+++ b/apps/web/examples/hr/hr.root.tsx
@@ -2,32 +2,24 @@ import { HR } from "flowbite-react";
 import type { CodeData } from "~/components/code-demo";
 
 const code = `
-"use client";
-
 import { HR } from "flowbite-react";
 
 function Component() {
   return (
-    <p className="text-gray-500 dark:text-gray-400">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
-        
-    <HR />
-        
-    <p className="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
-  )
-}
-`;
-
-const codeRSC = `
-import { HR } from "flowbite-react";
-
-function Component() {
-  return (
-      <p className="text-gray-500 dark:text-gray-400">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
-        
+    <>
+      <p className="text-gray-500 dark:text-gray-400">
+        Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest
+        data from other software development tools, so your IT support and operations teams have richer contextual
+        information to rapidly respond to requests, incidents, and changes.
+      </p>
       <HR />
-        
-      <p className="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
-  )
+      <p className="text-gray-500 dark:text-gray-400">
+        Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
+        critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
+        change.
+      </p>
+    </>
+  );
 }
 `;
 
@@ -60,7 +52,7 @@ export const root: CodeData = {
     {
       fileName: "server",
       language: "tsx",
-      code: codeRSC,
+      code,
     },
   ],
   githubSlug: "/hr/hr.root.tsx",
diff --git a/apps/web/examples/hr/hr.square.tsx b/apps/web/examples/hr/hr.square.tsx
index d5a506004..698e4758e 100644
--- a/apps/web/examples/hr/hr.square.tsx
+++ b/apps/web/examples/hr/hr.square.tsx
@@ -2,32 +2,46 @@ import { HRSquare } from "flowbite-react";
 import type { CodeData } from "~/components/code-demo";
 
 const code = `
-"use client";
-
 import { HR } from "flowbite-react";
 
 function Component() {
   return (
-    <p className="text-gray-500 dark:text-gray-400">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
-        
-    <HR.Square />
-        
-    <p className="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
-  )
+    <>
+      <p className="text-gray-500 dark:text-gray-400">
+        Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest
+        data from other software development tools, so your IT support and operations teams have richer contextual
+        information to rapidly respond to requests, incidents, and changes.
+      </p>
+      <HR.Square />
+      <p className="text-gray-500 dark:text-gray-400">
+        Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
+        critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
+        change.
+      </p>
+    </>
+  );
 }
 `;
 
 const codeRSC = `
-import { HRTrimmed } from "flowbite-react";
+import { HRSquare } from "flowbite-react";
 
 function Component() {
   return (
-    <p className="text-gray-500 dark:text-gray-400">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
-        
-    <HRSquare />
-        
-    <p className="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
-  )
+    <>
+      <p className="text-gray-500 dark:text-gray-400">
+        Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest
+        data from other software development tools, so your IT support and operations teams have richer contextual
+        information to rapidly respond to requests, incidents, and changes.
+      </p>
+      <HRSquare />
+      <p className="text-gray-500 dark:text-gray-400">
+        Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
+        critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
+        change.
+      </p>
+    </>
+  );
 }
 `;
 
@@ -39,9 +53,7 @@ function Component() {
         data from other software development tools, so your IT support and operations teams have richer contextual
         information to rapidly respond to requests, incidents, and changes.
       </p>
-
       <HRSquare />
-
       <p className="text-gray-500 dark:text-gray-400">
         Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
         critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
diff --git a/apps/web/examples/hr/hr.text.tsx b/apps/web/examples/hr/hr.text.tsx
index d7d2564d5..4ee3983d0 100644
--- a/apps/web/examples/hr/hr.text.tsx
+++ b/apps/web/examples/hr/hr.text.tsx
@@ -2,32 +2,46 @@ import { HRText } from "flowbite-react";
 import type { CodeData } from "~/components/code-demo";
 
 const code = `
-"use client";
-
 import { HR } from "flowbite-react";
 
 function Component() {
   return (
-    <p className="text-gray-500 dark:text-gray-400">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
-        
-    <HR.Text text="or" />
-        
-    <p className="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
-  )
+    <>
+      <p className="text-gray-500 dark:text-gray-400">
+        Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest
+        data from other software development tools, so your IT support and operations teams have richer contextual
+        information to rapidly respond to requests, incidents, and changes.
+      </p>
+      <HR.Text text="or" />
+      <p className="text-gray-500 dark:text-gray-400">
+        Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
+        critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
+        change.
+      </p>
+    </>
+  );
 }
 `;
 
 const codeRSC = `
-import { HRTrimmed } from "flowbite-react";
+import { HRText } from "flowbite-react";
 
 function Component() {
   return (
-    <p className="text-gray-500 dark:text-gray-400">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
-        
-    <HRText />
-        
-    <p className="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
-  )
+    <>
+      <p className="text-gray-500 dark:text-gray-400">
+        Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest
+        data from other software development tools, so your IT support and operations teams have richer contextual
+        information to rapidly respond to requests, incidents, and changes.
+      </p>
+      <HRText text="or" />
+      <p className="text-gray-500 dark:text-gray-400">
+        Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
+        critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
+        change.
+      </p>
+    </>
+  );
 }
 `;
 
@@ -39,9 +53,7 @@ function Component() {
         data from other software development tools, so your IT support and operations teams have richer contextual
         information to rapidly respond to requests, incidents, and changes.
       </p>
-
       <HRText text="or" />
-
       <p className="text-gray-500 dark:text-gray-400">
         Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
         critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
diff --git a/apps/web/examples/hr/hr.trimmed.tsx b/apps/web/examples/hr/hr.trimmed.tsx
index 7ed18fe7e..0881bbeb1 100644
--- a/apps/web/examples/hr/hr.trimmed.tsx
+++ b/apps/web/examples/hr/hr.trimmed.tsx
@@ -2,18 +2,24 @@ import { HRTrimmed } from "flowbite-react";
 import type { CodeData } from "~/components/code-demo";
 
 const code = `
-"use client";
-
 import { HR } from "flowbite-react";
 
 function Component() {
   return (
-    <p className="text-gray-500 dark:text-gray-400">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
-        
-    <HR.Trimmed />
-        
-    <p className="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
-  )
+    <>
+      <p className="text-gray-500 dark:text-gray-400">
+        Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest
+        data from other software development tools, so your IT support and operations teams have richer contextual
+        information to rapidly respond to requests, incidents, and changes.
+      </p>
+      <HR.Trimmed />
+      <p className="text-gray-500 dark:text-gray-400">
+        Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
+        critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
+        change.
+      </p>
+    </>
+  );
 }
 `;
 
@@ -22,12 +28,20 @@ import { HRTrimmed } from "flowbite-react";
 
 function Component() {
   return (
-    <p className="text-gray-500 dark:text-gray-400">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
-        
-    <HRTrimmed />
-        
-    <p className="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
-  )
+    <>
+      <p className="text-gray-500 dark:text-gray-400">
+        Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest
+        data from other software development tools, so your IT support and operations teams have richer contextual
+        information to rapidly respond to requests, incidents, and changes.
+      </p>
+      <HRTrimmed />
+      <p className="text-gray-500 dark:text-gray-400">
+        Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
+        critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
+        change.
+      </p>
+    </>
+  );
 }
 `;
 
diff --git a/packages/ui/src/components/HR/HRIcon.tsx b/packages/ui/src/components/HR/HRIcon.tsx
index fd3c6c949..00007fcf6 100644
--- a/packages/ui/src/components/HR/HRIcon.tsx
+++ b/packages/ui/src/components/HR/HRIcon.tsx
@@ -1,5 +1,5 @@
-import { forwardRef } from "react";
 import type { ComponentProps, FC } from "react";
+import { forwardRef } from "react";
 import { FaQuoteRight } from "react-icons/fa6";
 import { twMerge } from "tailwind-merge";
 import { mergeDeep } from "../../helpers/merge-deep";
@@ -21,11 +21,9 @@ export interface HRIconProps extends Omit<ComponentProps<"hr">, "ref"> {
 }
 
 export const HRIcon = forwardRef<HTMLHRElement, HRIconProps>(
-  ({ theme: customTheme = {}, icon: Icon, className, ...props }, ref) => {
+  ({ theme: customTheme = {}, icon: Icon = FaQuoteRight, className, ...props }, ref) => {
     const theme = mergeDeep(getTheme().hr.icon, customTheme);
 
-    const SVGIcon = Icon ? Icon : FaQuoteRight;
-
     return (
       <div className={theme.base}>
         <hr
@@ -36,7 +34,7 @@ export const HRIcon = forwardRef<HTMLHRElement, HRIconProps>(
           {...props}
         />
         <div className={theme.icon.base}>
-          <SVGIcon aria-hidden className={theme.icon.icon} />
+          <Icon aria-hidden className={theme.icon.icon} />
         </div>
       </div>
     );