Skip to content

Commit 92f41fe

Browse files
dhavalveeraSutuSebastian
dhavalveera
and
SutuSebastian
authored
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 <[email protected]> Co-authored-by: SutuSebastian <[email protected]>
1 parent 7476312 commit 92f41fe

22 files changed

+765
-0
lines changed

‎.changeset/tough-ducks-beam.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"flowbite-react": patch
3+
---
4+
5+
feat: add `HR` component

‎apps/web/content/docs/typography/hr.mdx

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
---
2+
title: React Horizontal Line (HR) - Flowbite
3+
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
4+
---
5+
6+
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.
7+
8+
## Default HR
9+
10+
Use this example to separate text content with a `<hr />` horizontal line.
11+
12+
<Example name="hr.root" />
13+
14+
## Trimmed
15+
16+
Use this example to show a shorter version of the horizontal line.
17+
18+
<Example name="hr.trimmed" />
19+
20+
## Icon HR
21+
22+
This example can be used to set a custom [SVG icon](https://flowbite.com/icons/) in the middle of the HR element.
23+
24+
<Example name="hr.icon" />
25+
26+
## HR with Text
27+
28+
Use this example to add a text in the middle of the HR component.
29+
30+
<Example name="hr.text" />
31+
32+
## HR Shape (square)
33+
34+
This example can be used to separate content with an HR tag as a shape instead of a line.
35+
36+
<Example name="hr.square" />
37+
38+
## Theme
39+
40+
To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
41+
42+
<Theme name="hr" />
43+
44+
## References
45+
46+
- [Flowbite HR](https://flowbite.com/docs/typography/hr/)

‎apps/web/data/docs-sidebar.ts

+1
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@ export const DOCS_SIDEBAR: DocsSidebarSection[] = [
101101
items: [
102102
{ title: "Blockquote", href: "/docs/typography/blockquote", isNew: true },
103103
{ title: "List", href: "/docs/typography/list", isNew: true },
104+
{ title: "HR", href: "/docs/typography/hr", isNew: true },
104105
],
105106
},
106107
];

‎apps/web/examples/hr/hr.icon.tsx

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import { HRIcon } from "flowbite-react";
2+
import type { CodeData } from "~/components/code-demo";
3+
4+
const code = `
5+
import { HR } from "flowbite-react";
6+
7+
function Component() {
8+
return (
9+
<>
10+
<p className="text-gray-500 dark:text-gray-400">
11+
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest
12+
data from other software development tools, so your IT support and operations teams have richer contextual
13+
information to rapidly respond to requests, incidents, and changes.
14+
</p>
15+
<HR.Icon />
16+
<p className="text-gray-500 dark:text-gray-400">
17+
Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
18+
critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
19+
change.
20+
</p>
21+
</>
22+
);
23+
}
24+
`;
25+
26+
const codeRSC = `
27+
import { HRIcon } from "flowbite-react";
28+
29+
function Component() {
30+
return (
31+
<>
32+
<p className="text-gray-500 dark:text-gray-400">
33+
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest
34+
data from other software development tools, so your IT support and operations teams have richer contextual
35+
information to rapidly respond to requests, incidents, and changes.
36+
</p>
37+
<HRIcon />
38+
<p className="text-gray-500 dark:text-gray-400">
39+
Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
40+
critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
41+
change.
42+
</p>
43+
</>
44+
);
45+
}
46+
`;
47+
48+
function Component() {
49+
return (
50+
<>
51+
<p className="text-gray-500 dark:text-gray-400">
52+
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest
53+
data from other software development tools, so your IT support and operations teams have richer contextual
54+
information to rapidly respond to requests, incidents, and changes.
55+
</p>
56+
<HRIcon />
57+
<p className="text-gray-500 dark:text-gray-400">
58+
Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
59+
critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
60+
change.
61+
</p>
62+
</>
63+
);
64+
}
65+
66+
export const icon: CodeData = {
67+
type: "single",
68+
code: [
69+
{
70+
fileName: "client",
71+
language: "tsx",
72+
code,
73+
},
74+
{
75+
fileName: "server",
76+
language: "tsx",
77+
code: codeRSC,
78+
},
79+
],
80+
githubSlug: "/hr/hr.icon.tsx",
81+
component: <Component />,
82+
};

‎apps/web/examples/hr/hr.root.tsx

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { HR } from "flowbite-react";
2+
import type { CodeData } from "~/components/code-demo";
3+
4+
const code = `
5+
import { HR } from "flowbite-react";
6+
7+
function Component() {
8+
return (
9+
<>
10+
<p className="text-gray-500 dark:text-gray-400">
11+
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest
12+
data from other software development tools, so your IT support and operations teams have richer contextual
13+
information to rapidly respond to requests, incidents, and changes.
14+
</p>
15+
<HR />
16+
<p className="text-gray-500 dark:text-gray-400">
17+
Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
18+
critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
19+
change.
20+
</p>
21+
</>
22+
);
23+
}
24+
`;
25+
26+
function Component() {
27+
return (
28+
<>
29+
<p className="text-gray-500 dark:text-gray-400">
30+
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest
31+
data from other software development tools, so your IT support and operations teams have richer contextual
32+
information to rapidly respond to requests, incidents, and changes.
33+
</p>
34+
<HR />
35+
<p className="text-gray-500 dark:text-gray-400">
36+
Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
37+
critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
38+
change.
39+
</p>
40+
</>
41+
);
42+
}
43+
44+
export const root: CodeData = {
45+
type: "single",
46+
code: [
47+
{
48+
fileName: "client",
49+
language: "tsx",
50+
code,
51+
},
52+
{
53+
fileName: "server",
54+
language: "tsx",
55+
code,
56+
},
57+
],
58+
githubSlug: "/hr/hr.root.tsx",
59+
component: <Component />,
60+
};

‎apps/web/examples/hr/hr.square.tsx

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import { HRSquare } from "flowbite-react";
2+
import type { CodeData } from "~/components/code-demo";
3+
4+
const code = `
5+
import { HR } from "flowbite-react";
6+
7+
function Component() {
8+
return (
9+
<>
10+
<p className="text-gray-500 dark:text-gray-400">
11+
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest
12+
data from other software development tools, so your IT support and operations teams have richer contextual
13+
information to rapidly respond to requests, incidents, and changes.
14+
</p>
15+
<HR.Square />
16+
<p className="text-gray-500 dark:text-gray-400">
17+
Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
18+
critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
19+
change.
20+
</p>
21+
</>
22+
);
23+
}
24+
`;
25+
26+
const codeRSC = `
27+
import { HRSquare } from "flowbite-react";
28+
29+
function Component() {
30+
return (
31+
<>
32+
<p className="text-gray-500 dark:text-gray-400">
33+
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest
34+
data from other software development tools, so your IT support and operations teams have richer contextual
35+
information to rapidly respond to requests, incidents, and changes.
36+
</p>
37+
<HRSquare />
38+
<p className="text-gray-500 dark:text-gray-400">
39+
Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
40+
critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
41+
change.
42+
</p>
43+
</>
44+
);
45+
}
46+
`;
47+
48+
function Component() {
49+
return (
50+
<>
51+
<p className="text-gray-500 dark:text-gray-400">
52+
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest
53+
data from other software development tools, so your IT support and operations teams have richer contextual
54+
information to rapidly respond to requests, incidents, and changes.
55+
</p>
56+
<HRSquare />
57+
<p className="text-gray-500 dark:text-gray-400">
58+
Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
59+
critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
60+
change.
61+
</p>
62+
</>
63+
);
64+
}
65+
66+
export const square: CodeData = {
67+
type: "single",
68+
code: [
69+
{
70+
fileName: "client",
71+
language: "tsx",
72+
code,
73+
},
74+
{
75+
fileName: "server",
76+
language: "tsx",
77+
code: codeRSC,
78+
},
79+
],
80+
githubSlug: "/hr/hr.square.tsx",
81+
component: <Component />,
82+
};

‎apps/web/examples/hr/hr.text.tsx

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import { HRText } from "flowbite-react";
2+
import type { CodeData } from "~/components/code-demo";
3+
4+
const code = `
5+
import { HR } from "flowbite-react";
6+
7+
function Component() {
8+
return (
9+
<>
10+
<p className="text-gray-500 dark:text-gray-400">
11+
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest
12+
data from other software development tools, so your IT support and operations teams have richer contextual
13+
information to rapidly respond to requests, incidents, and changes.
14+
</p>
15+
<HR.Text text="or" />
16+
<p className="text-gray-500 dark:text-gray-400">
17+
Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
18+
critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
19+
change.
20+
</p>
21+
</>
22+
);
23+
}
24+
`;
25+
26+
const codeRSC = `
27+
import { HRText } from "flowbite-react";
28+
29+
function Component() {
30+
return (
31+
<>
32+
<p className="text-gray-500 dark:text-gray-400">
33+
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest
34+
data from other software development tools, so your IT support and operations teams have richer contextual
35+
information to rapidly respond to requests, incidents, and changes.
36+
</p>
37+
<HRText text="or" />
38+
<p className="text-gray-500 dark:text-gray-400">
39+
Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
40+
critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
41+
change.
42+
</p>
43+
</>
44+
);
45+
}
46+
`;
47+
48+
function Component() {
49+
return (
50+
<>
51+
<p className="text-gray-500 dark:text-gray-400">
52+
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest
53+
data from other software development tools, so your IT support and operations teams have richer contextual
54+
information to rapidly respond to requests, incidents, and changes.
55+
</p>
56+
<HRText text="or" />
57+
<p className="text-gray-500 dark:text-gray-400">
58+
Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
59+
critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
60+
change.
61+
</p>
62+
</>
63+
);
64+
}
65+
66+
export const text: CodeData = {
67+
type: "single",
68+
code: [
69+
{
70+
fileName: "client",
71+
language: "tsx",
72+
code,
73+
},
74+
{
75+
fileName: "server",
76+
language: "tsx",
77+
code: codeRSC,
78+
},
79+
],
80+
githubSlug: "/hr/hr.text.tsx",
81+
component: <Component />,
82+
};

0 commit comments

Comments
 (0)