P-UI Library is a place where you can just pick any component you like and adjust it the way you want.
This documentation is the place for you to find what you need.
P-UI Library is designed to be highly customizable, making it a great fit for a wide range of projects.
Whether you're using your own design system or libraries like Tailwind CSS,
P-UI Library components provide the flexibility and functionality you need to create beautiful and functional user interfaces.
Please note that some of the components may have character entity reference rather than the actual character.
import React, { useState } from 'react';
interface AccordionItem {
id: number;
title: string;
content: string;
}
interface AccordionProps {
items: AccordionItem[];
className: string;
itemsCN: string,
itemsTitleCN: string,
itemsContentCN: string,
}
export default function AccordionItems({
items, className, itemsCN, itemsTitleCN, itemsContentCN,
}: AccordionProps) {
const [activeIndex, setActiveIndex] = useState(-1);
const toggleAccordionItem = (index: number) => {
if (index === activeIndex) {
setActiveIndex(-1);
} else {
setActiveIndex(index);
}
};
const handleAccordionKeyDown = (event: React.KeyboardEvent, index: number) => {
if (event.key === 'Enter') {
toggleAccordionItem(index);
}
};
return (
<div>
{items.map((item: AccordionItem) => (
<div>
<div> toggleAccordionItem(item.id)}
role="button"
tabIndex={0}
onKeyDown={(event) => handleAccordionKeyDown(event, item.id)}
>
{item.title}
</div>
<div>
{item.content}
</div>
</div>
))}
</div>
);
}
import React from 'react';
interface ButtonProps {
text: string;
disabled?: boolean;
classNames?: string;
click?: () => void;
buttonType: 'submit' | 'reset' | 'button';
}
export default function Button({
text, disabled, classNames, click, buttonType,
}:ButtonProps) {
return (
<button type="{buttonType}">
{text}
</button>
);
}
import React, { ReactNode } from 'react'
interface ButtonProps {
buttonText: string
buttonDisabled?: boolean
buttonClassNames?: string
buttonClick?: () => void
buttonType: 'submit' | 'reset' | 'button'
}
interface CardProps extends ButtonProps {
cardImage?: string
cardTitle?: string
cardSubTitle?: string
cardText?: string
}
export default function Card ({
cardImage, cardTitle, cardSubTitle, cardText, buttonText, buttonClick, buttonDisabled, buttonType, buttonClassNames
}: CardProps): ReactNode {
return (
<div>
{cardImage
? (
<div>
<img alt="An illustrative of a curry" src="{cardImage}">
</div>
)
: <>}
{cardTitle
? (
<div>
{cardTitle}
</div>
)
: null}
{cardSubTitle
? (
<div>
{cardSubTitle}
</div>
)
: null}
{cardText
? (
<div>
{cardText}
</div>
)
: null}
<button type="{buttonType}">
{buttonText}
</button>
</div>
)
}
import React, { ReactNode } from 'react';
interface ContainerProps {
children: ReactNode,
classNames: string;
}
export default function Container({ children, classNames }: ContainerProps) {
return (
<div>
{children}
</div>
);
}
import React, { useState, ReactNode } from 'react';
interface ButtonProps {
buttonText: string
buttonDisabled?: boolean
buttonClassNames?: string
buttonType: 'submit' | 'reset' | 'button'
}
interface PopinProps extends ButtonProps {
popinTitle?: string
popinContent?: string | ReactNode
}
export default function Popin({
popinTitle, popinContent, buttonText, buttonDisabled, buttonClassNames, buttonType
}: PopinProps): ReactNode {
const [popinOpen, setPopinOpen] = useState(false);
return (
<>
<button type="{buttonType}"> { buttonDisabled ? undefined : setPopinOpen(!popinOpen); }} className={`${buttonClassNames} btn-default`}>{buttonText}</button>
{popinOpen
? (
<>
<div>
<button type="button"> { setPopinOpen(!popinOpen); }}>✖</button>
<h2>{popinTitle}</h2>
{popinContent}
</div>
<div> { setPopinOpen(!popinOpen); }} aria-hidden="true" />
)
: null}
);
}</div>