Skip to content

Commit

Permalink
Refactor: MISC necessary theming pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@habubey
habubey committed Oct 5, 2023
1 parent 75e5358 commit 3c974fc
Show file tree
Hide file tree
Showing 3 changed files with 41 additions and 27 deletions.
50 changes: 32 additions & 18 deletions components/doc/avatar/theming/tailwinddoc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,32 +38,46 @@ const Tailwind = {
javascript: `
import React from 'react';
import { Avatar } from 'primereact/avatar';
import { AvatarGroup } from 'primereact/avatargroup';
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="card">
<div className="flex flex-wrap gap-5">
<div className="flex-auto">
<h5 className="text-gray-700 dark:text-white/80">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 className="text-gray-700 dark:text-white/80">Badge</h5>
<Avatar className="relative" image="https://primefaces.org/cdn/primereact/images/organization/walter.jpg" size="xlarge">
<Badge className="absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 origin-top-right m-0" 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 className="flex-auto">
<h5 className="text-gray-700 dark:text-white/80">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>
</div>
<div className="card flex justify-content-center">
<AvatarGroup>
<Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" size="large" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primereact/images/avatar/asiyajavayant.png" size="large" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primereact/images/avatar/onyamalimba.png" size="large" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primereact/images/avatar/ionibowcher.png" size="large" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primereact/images/avatar/xuxuefeng.png" size="large" shape="circle" />
<Avatar label="+2" shape="circle" size="large" style={{ backgroundColor: '#9c27b0', color: '#ffffff' }} />
</AvatarGroup>
</div>
</>
)
}
`
Expand Down
16 changes: 8 additions & 8 deletions components/doc/badge/theming/tailwinddoc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,22 +39,22 @@ import { Badge } from 'primereact/badge';
export default function UnstyledDemo() {
return (
<div>
<div className="card flex flex-wrap justify-content-center gap-2">
<div className="card flex flex-wrap justify-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>
<div className="card flex flex-wrap justify-center gap-4">
<i className="pi pi-bell relative text-gray-700 dark:text-white/80" style={{ fontSize: '2rem' }}>
<Badge className="absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 origin-top-right m-0" value="2"></Badge>
</i>
<i className="pi pi-calendar p-overlay-badge" style={{ fontSize: '2rem' }}>
<Badge value="5+" severity="danger"></Badge>
<i className="pi pi-calendar relative text-gray-700 dark:text-white/80" style={{ fontSize: '2rem' }}>
<Badge className="absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 origin-top-right m-0" value="5+" severity="danger"></Badge>
</i>
<i className="pi pi-envelope p-overlay-badge" style={{ fontSize: '2rem' }}>
<Badge severity="danger"></Badge>
<i className="pi pi-envelope relative text-gray-700 dark:text-white/80" style={{ fontSize: '2rem' }}>
<Badge className="absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 origin-top-right m-0" severity="danger"></Badge>
</i>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion components/doc/blockui/theming/tailwinddoc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export default function UnstyledDemo() {
</div>
<BlockUI blocked={blocked}>
<Panel header="Basic">
<p className="m-0">
<p className="text-gray-700 dark:text-white/80 m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
Expand Down

0 comments on commit 3c974fc

Please sign in to comment.