forked from themesberg/flowbite-react
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add
HR
component (themesberg#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>
- Loading branch information
1 parent
7476312
commit 92f41fe
Showing
22 changed files
with
765 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
"flowbite-react": patch | ||
--- | ||
|
||
feat: add `HR` component |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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/) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 />, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 />, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 />, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 />, | ||
}; |
Oops, something went wrong.