Skip to content

Commit

Permalink
Add Tailwind Demo to MISC section
Browse files Browse the repository at this point in the history
  • Loading branch information
@habubey
habubey committed Aug 24, 2023
1 parent 5ccb33b commit 4970f44
Show file tree
Hide file tree
Showing 41 changed files with 1,703 additions and 59 deletions.
55 changes: 55 additions & 0 deletions components/doc/avatar/theming/styleddoc.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import { DocSectionText } from '../../common/docsectiontext';

export function StyledDoc(props) {
return (
<>
<DocSectionText {...props}>
<p>List of class names used in the styled mode.</p>
</DocSectionText>
<div className="doc-tablewrapper">
<table className="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-avatar</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-avatar-image</td>
<td>Container element in image mode.</td>
</tr>
<tr>
<td>p-avatar-circle</td>
<td>Container element with a circle shape.</td>
</tr>
<tr>
<td>p-avatar-text</td>
<td>Text of the Avatar.</td>
</tr>
<tr>
<td>p-avatar-icon</td>
<td>Icon of the Avatar.</td>
</tr>
<tr>
<td>p-avatar-lg</td>
<td>Container element with a large size.</td>
</tr>
<tr>
<td>p-avatar-xl</td>
<td>Container element with an xlarge size.</td>
</tr>
<tr>
<td>p-avatar-group</td>
<td>Container element of the group element.</td>
</tr>
</tbody>
</table>
</div>
</>
);
}
83 changes: 83 additions & 0 deletions components/doc/avatar/theming/tailwinddoc.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
import Link from 'next/link';
import { DocSectionCode } from '../../common/docsectioncode';
import { DocSectionText } from '../../common/docsectiontext';

export function TailwindDoc(props) {
const code = {
basic: `
avatar: {
root: ({ props, state }) => ({
className: classNames(
'flex items-center justify-center',
'bg-gray-300 dark:bg-gray-800',
{
'rounded-lg': props.shape == 'square',
'rounded-full': props.shape == 'circle'
},
{
'text-base h-8 w-8': props.size == null || props.size == 'normal',
'w-12 h-12 text-xl': props.size == 'large',
'w-16 h-16 text-2xl': props.size == 'xlarge'
},
{
'-ml-4 border-2 border-white dark:border-gray-900': state.isNestedInAvatarGroup
}
)
}),
image: 'h-full w-full'
},
avatargroup: {
root: 'flex items-center'
}
`
};

const code2 = {
javascript: `
import React from 'react';
import { Avatar } from 'primereact/avatar';
import { Badge } from 'primereact/badge';
export default function UnstyledDemo() {
return (
<div className="card">
<div className="flex flex-wrap gap-5">
<div className="flex-auto">
<h5>Image</h5>
<Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" className="mr-2" size="xlarge" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primereact/images/avatar/asiyajavayant.png" className="mr-2" size="large" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primereact/images/avatar/onyamalimba.png" shape="circle" />
</div>
<div className="flex-auto">
<h5>Badge</h5>
<Avatar className="p-overlay-badge" image="https://primefaces.org/cdn/primereact/images/organization/walter.jpg" size="xlarge">
<Badge value="4" severity="danger" />
</Avatar>
</div>
<div className="flex-auto">
<h5>Gravatar</h5>
<Avatar image={"https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp"} className="flex align-items-center justify-content-center mr-2" size="xlarge" />
</div>
</div>
</div>
)
}
`
};

return (
<>
<DocSectionText {...props}>
<p>
PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
<Link href="/tailwind">Tailwind Customization</Link> section for an example.
</p>
<DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
<p>A playground sample with the pre-built Tailwind theme.</p>
<DocSectionCode code={code2} embedded />
</DocSectionText>
</>
);
}
59 changes: 59 additions & 0 deletions components/doc/badge/theming/styleddoc.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import { DocSectionText } from '../../common/docsectiontext';

export function StyledDoc(props) {
return (
<>
<DocSectionText {...props}>
<p>List of class names used in the styled mode.</p>
</DocSectionText>
<div className="doc-tablewrapper">
<table className="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-badge</td>
<td>Badge element</td>
</tr>
<tr>
<td>p-overlay-badge</td>
<td>Wrapper of a badge and its target.</td>
</tr>
<tr>
<td>p-badge-dot</td>
<td>Badge element with no value.</td>
</tr>
<tr>
<td>p-badge-success</td>
<td>Badge element with success severity.</td>
</tr>
<tr>
<td>p-badge-info</td>
<td>Badge element with info severity.</td>
</tr>
<tr>
<td>p-badge-warning</td>
<td>Badge element with warning severity.</td>
</tr>
<tr>
<td>p-badge-danger</td>
<td>Badge element with danger severity.</td>
</tr>
<tr>
<td>p-badge-lg</td>
<td>Large badge element</td>
</tr>
<tr>
<td>p-badge-xl</td>
<td>Extra large badge element</td>
</tr>
</tbody>
</table>
</div>
</>
);
}
77 changes: 77 additions & 0 deletions components/doc/badge/theming/tailwinddoc.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import Link from 'next/link';
import { DocSectionCode } from '../../common/docsectioncode';
import { DocSectionText } from '../../common/docsectiontext';

export function TailwindDoc(props) {
const code = {
basic: `
badge: {
root: ({ props }) => ({
className: classNames(
'rounded-full p-0 text-center inline-block',
'bg-blue-500 text-white font-bold',
{
'bg-gray-500 ': props.severity == 'secondary',
'bg-green-500 ': props.severity == 'success',
'bg-blue-500 ': props.severity == 'info',
'bg-orange-500 ': props.severity == 'warning',
'bg-purple-500 ': props.severity == 'help',
'bg-red-500 ': props.severity == 'danger'
},
{
'text-xs min-w-[1.5rem] h-[1.5rem] leading-[1.5rem]': props.size == null,
'text-lg min-w-[2.25rem] h-[2.25rem] leading-[2.25rem]': props.size == 'large',
'text-2xl min-w-[3rem] h-[3rem] leading-[3rem]': props.size == 'xlarge'
}
)
})
}
`
};

const code2 = {
javascript: `
import React from 'react';
import { Badge } from 'primereact/badge';
export default function UnstyledDemo() {
return (
<div>
<div className="card flex flex-wrap justify-content-center gap-2">
<Badge value="2"></Badge>
<Badge value="8" severity="success"></Badge>
<Badge value="4" severity="info"></Badge >
<Badge value="12" severity="warning"></Badge>
<Badge value="3" severity="danger"></Badge>
</div>
<div className="card flex flex-wrap justify-content-center gap-4">
<i className="pi pi-bell p-overlay-badge" style={{ fontSize: '2rem' }}>
<Badge value="2"></Badge>
</i>
<i className="pi pi-calendar p-overlay-badge" style={{ fontSize: '2rem' }}>
<Badge value="5+" severity="danger"></Badge>
</i>
<i className="pi pi-envelope p-overlay-badge" style={{ fontSize: '2rem' }}>
<Badge severity="danger"></Badge>
</i>
</div>
</div>
);
}
`
};

return (
<>
<DocSectionText {...props}>
<p>
PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
<Link href="/tailwind">Tailwind Customization</Link> section for an example.
</p>
<DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
<p>A playground sample with the pre-built Tailwind theme.</p>
<DocSectionCode code={code2} embedded />
</DocSectionText>
</>
);
}
12 changes: 7 additions & 5 deletions components/doc/blockui/basicdoc.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { DocSectionCode } from '../common/docsectioncode';
import { DocSectionText } from '../common/docsectiontext';
import { useState } from 'react';
import { BlockUI } from '../../../components/lib/blockui/BlockUI';
import { Panel } from '../../../components/lib/panel/Panel';
import { useState } from 'react';
import { Button } from '../../lib/button/Button';
import { DocSectionCode } from '../common/docsectioncode';
import { DocSectionText } from '../common/docsectiontext';

export function BasicDoc(props) {
const [blocked, setBlocked] = useState(false);
Expand All @@ -25,9 +25,10 @@ export function BasicDoc(props) {
</BlockUI>
`,
javascript: `
import React from 'react';
import React, { useState } from 'react';
import { BlockUI } from 'primereact/blockui';
import { Panel } from 'primereact/panel';
import { Button } from 'primereact/button';
export default function BasicDemo() {
const [blocked, setBlocked] = useState(false);
Expand All @@ -52,9 +53,10 @@ export default function BasicDemo() {
}
`,
typescript: `
import React from 'react';
import React, { useState } from 'react';
import { BlockUI } from 'primereact/blockui';
import { Panel } from 'primereact/panel';
import { Button } from 'primereact/button';
export default function BasicDemo() {
const [blocked, setBlocked] = useState<boolean>(false);
Expand Down
12 changes: 7 additions & 5 deletions components/doc/blockui/templatedoc.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { DocSectionCode } from '../common/docsectioncode';
import { DocSectionText } from '../common/docsectiontext';
import { useState } from 'react';
import { BlockUI } from '../../../components/lib/blockui/BlockUI';
import { Panel } from '../../../components/lib/panel/Panel';
import { useState } from 'react';
import { Button } from '../../lib/button/Button';
import { DocSectionCode } from '../common/docsectioncode';
import { DocSectionText } from '../common/docsectiontext';

export function TemplateDoc(props) {
const [blocked, setBlocked] = useState(false);
Expand All @@ -25,9 +25,10 @@ export function TemplateDoc(props) {
</BlockUI>
`,
javascript: `
import React from 'react';
import React, { useState } from 'react';
import { BlockUI } from 'primereact/blockui';
import { Panel } from 'primereact/panel';
import { Button } from 'primereact/button';
export default function TemplateDemo() {
const [blocked, setBlocked] = useState(false);
Expand All @@ -52,9 +53,10 @@ export default function TemplateDemo() {
}
`,
typescript: `
import React from 'react';
import React, { useState } from 'react';
import { BlockUI } from 'primereact/blockui';
import { Panel } from 'primereact/panel';
import { Button } from 'primereact/button';
export default function TemplateDemo() {
const [blocked, setBlocked] = useState<boolean>(false);
Expand Down
31 changes: 31 additions & 0 deletions components/doc/blockui/theming/styleddoc.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { DocSectionText } from '../../common/docsectiontext';

export function StyledDoc(props) {
return (
<>
<DocSectionText {...props}>
<p>List of class names used in the styled mode.</p>
</DocSectionText>
<div className="doc-tablewrapper">
<table className="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-blockui</td>
<td>Mask element.</td>
</tr>
<tr>
<td>p-blockui-document</td>
<td>Mask element in full screen mode.</td>
</tr>
</tbody>
</table>
</div>
</>
);
}
Loading

0 comments on commit 4970f44

Please sign in to comment.