Documentation

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.

Accordion component

Accordion 1

Accordion 2

Accordion 3

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) =&gt; {
    if (index === activeIndex) {
      setActiveIndex(-1);
    } else {
      setActiveIndex(index);
    }
  };

  const handleAccordionKeyDown = (event: React.KeyboardEvent, index: number) =&gt; {
    if (event.key === 'Enter') {
      toggleAccordionItem(index);
    }
  };

  return (
    <div>
      {items.map((item: AccordionItem) =&gt; (
        <div>
          <div> toggleAccordionItem(item.id)}
            role="button"
            tabIndex={0}
            onKeyDown={(event) =&gt; handleAccordionKeyDown(event, item.id)}
          &gt;
            {item.title}
          </div>
          <div>
            {item.content}
          </div>
        </div>
      ))}
    </div>
  );
}

Button component

import React from 'react';

interface ButtonProps {
  text: string;
  disabled?: boolean;
  classNames?: string;
  click?: () =&gt; void;
  buttonType: 'submit' | 'reset' | 'button';
}

export default function Button({
  text, disabled, classNames, click, buttonType,
}:ButtonProps) {
  return (
    <button type="{buttonType}">
      {text}
    </button>
  );
}

Card component

This is the title

This is a card subtitle

This is the card text content which can be much longer than other text.

This is the card without image

This is a card subtitle

This is the card text content which can be much longer than other text.

This is the card without image and subtitle

This is the card text content which can be much longer than other text.

import React, { ReactNode } from 'react'

interface ButtonProps {
  buttonText: string
  buttonDisabled?: boolean
  buttonClassNames?: string
  buttonClick?: () =&gt; 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>
          )
        : &lt;&gt;}
      {cardTitle
        ? (
          <div>
            {cardTitle}
          </div>
          )
        : null}
      {cardSubTitle
        ? (
          <div>
            {cardSubTitle}
          </div>
          )
        : null}
      {cardText
        ? (
          <div>
            {cardText}
          </div>
          )
        : null}
      <button type="{buttonType}">
        {buttonText}
      </button>
    </div>
  )
}

Container component

import React, { ReactNode } from 'react';

interface ContainerProps {
children: ReactNode,
classNames: string;
}

export default function Container({ children, classNames }: ContainerProps) {
return (
  <div>
    {children}
  </div>
);
}

Popin component

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 (
    &lt;&gt;
      <button type="{buttonType}"> { buttonDisabled ? undefined : setPopinOpen(!popinOpen); }} className={`${buttonClassNames} btn-default`}&gt;{buttonText}</button>
      {popinOpen
        ? (
          &lt;&gt;
            <div>
              <button type="button"> { setPopinOpen(!popinOpen); }}&gt;✖</button>
              <h2>{popinTitle}</h2>
              {popinContent}
            </div>
            <div> { setPopinOpen(!popinOpen); }} aria-hidden="true" /&gt;
          
        )
        : null}
    
  );
}</div>