feat: add HR component (#1346)

* feat/hr -- HR Component added * fix: Code Example formatting issue fixed * fixed based on AI Reviews * typecheck error fixed * fix: exporting other components issue fixed * fix: removed redundant fragments * small doc fix * fix: moved the HR from common to under Typography in Sidebar Items * fix: moved hr.mdx from /components/ to /typography/ * fix: sidebar `HR` slug * fix: docs `HR` examples * add changeset --------- Co-authored-by: Sutu Sebastian <41998826+SutuSebastian@users.noreply.github.com> Co-authored-by: SutuSebastian <sebiitv@gmail.com>
themesberg · Jun 19, 2024 · 92f41fe · 92f41fe
1 parent 7476312
commit 92f41fe
Show file tree

Hide file tree

Showing 22 changed files with 765 additions and 0 deletions.
diff --git a/.changeset/tough-ducks-beam.md b/.changeset/tough-ducks-beam.md
@@ -0,0 +1,5 @@
+---
+"flowbite-react": patch
+---
+
+feat: add `HR` component
diff --git a/apps/web/content/docs/typography/hr.mdx b/apps/web/content/docs/typography/hr.mdx
@@ -0,0 +1,46 @@
+---
+title: React Horizontal Line (HR) - Flowbite
+description: Create a horizontal line using the HR tag to separate content such as paragraphs, blockquotes, and other elements using the utility classes from Tailwind CSS
+---
+
+The HR component can be used to separate content using a horizontal line by adding space between elements based on multiple styles, variants, and layouts.
+
+## Default HR
+
+Use this example to separate text content with a `<hr />` horizontal line.
+
+<Example name="hr.root" />
+
+## Trimmed
+
+Use this example to show a shorter version of the horizontal line.
+
+<Example name="hr.trimmed" />
+
+## Icon HR
+
+This example can be used to set a custom [SVG icon](https://flowbite.com/icons/) in the middle of the HR element.
+
+<Example name="hr.icon" />
+
+## HR with Text
+
+Use this example to add a text in the middle of the HR component.
+
+<Example name="hr.text" />
+
+## HR Shape (square)
+
+This example can be used to separate content with an HR tag as a shape instead of a line.
+
+<Example name="hr.square" />
+
+## Theme
+
+To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
+
+<Theme name="hr" />
+
+## References
+
+- [Flowbite HR](https://flowbite.com/docs/typography/hr/)
diff --git a/apps/web/data/docs-sidebar.ts b/apps/web/data/docs-sidebar.ts
@@ -101,6 +101,7 @@ export const DOCS_SIDEBAR: DocsSidebarSection[] = [
     items: [
       { title: "Blockquote", href: "/docs/typography/blockquote", isNew: true },
       { title: "List", href: "/docs/typography/list", isNew: true },
+      { title: "HR", href: "/docs/typography/hr", isNew: true },
     ],
   },
 ];
diff --git a/apps/web/examples/hr/hr.icon.tsx b/apps/web/examples/hr/hr.icon.tsx
@@ -0,0 +1,82 @@
+import { HRIcon } from "flowbite-react";
+import type { CodeData } from "~/components/code-demo";
+
+const code = `
+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>
+    </>
+  );
+}
+`;
+
+const codeRSC = `
+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>
+    </>
+  );
+}
+`;
+
+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>
+    </>
+  );
+}
+
+export const icon: CodeData = {
+  type: "single",
+  code: [
+    {
+      fileName: "client",
+      language: "tsx",
+      code,
+    },
+    {
+      fileName: "server",
+      language: "tsx",
+      code: codeRSC,
+    },
+  ],
+  githubSlug: "/hr/hr.icon.tsx",
+  component: <Component />,
+};
diff --git a/apps/web/examples/hr/hr.root.tsx b/apps/web/examples/hr/hr.root.tsx
@@ -0,0 +1,60 @@
+import { HR } from "flowbite-react";
+import type { CodeData } from "~/components/code-demo";
+
+const code = `
+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>
+    </>
+  );
+}
+`;
+
+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>
+    </>
+  );
+}
+
+export const root: CodeData = {
+  type: "single",
+  code: [
+    {
+      fileName: "client",
+      language: "tsx",
+      code,
+    },
+    {
+      fileName: "server",
+      language: "tsx",
+      code,
+    },
+  ],
+  githubSlug: "/hr/hr.root.tsx",
+  component: <Component />,
+};
diff --git a/apps/web/examples/hr/hr.square.tsx b/apps/web/examples/hr/hr.square.tsx
@@ -0,0 +1,82 @@
+import { HRSquare } from "flowbite-react";
+import type { CodeData } from "~/components/code-demo";
+
+const code = `
+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>
+    </>
+  );
+}
+`;
+
+const codeRSC = `
+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>
+    </>
+  );
+}
+`;
+
+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>
+    </>
+  );
+}
+
+export const square: CodeData = {
+  type: "single",
+  code: [
+    {
+      fileName: "client",
+      language: "tsx",
+      code,
+    },
+    {
+      fileName: "server",
+      language: "tsx",
+      code: codeRSC,
+    },
+  ],
+  githubSlug: "/hr/hr.square.tsx",
+  component: <Component />,
+};
diff --git a/apps/web/examples/hr/hr.text.tsx b/apps/web/examples/hr/hr.text.tsx
@@ -0,0 +1,82 @@
+import { HRText } from "flowbite-react";
+import type { CodeData } from "~/components/code-demo";
+
+const code = `
+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>
+    </>
+  );
+}
+`;
+
+const codeRSC = `
+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 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>
+    </>
+  );
+}
+`;
+
+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 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>
+    </>
+  );
+}
+
+export const text: CodeData = {
+  type: "single",
+  code: [
+    {
+      fileName: "client",
+      language: "tsx",
+      code,
+    },
+    {
+      fileName: "server",
+      language: "tsx",
+      code: codeRSC,
+    },
+  ],
+  githubSlug: "/hr/hr.text.tsx",
+  component: <Component />,
+};