Overlay

Overlay #

Standard overlay component for any component

import { POverlay } from 'pearkit';

Basic #

A standard overlay usage. Whether you use our PCard component or do it yourself, it will answer all of them.

const [overlayStatus,setOverlayStatus] = useState(false);

<POverlay status={overlayStatus} close={() => setOverlayStatus(false)}>
    <LoginComponent />
</POverlay>

//Login Component

<PCard className={"p-8"}>
<div className="flex flex-col gap-8">
    <h1 className="text-2xl font-bold mb-2">Login Screen</h1>
    <h2 className="text-gray-500 mb-4">Welcome again. Please login.</h2>
    <PInput placeholder="info@example.com" onChange={() => null}/>
    <PInput placeholder="********" type="password" onChange={() => null}/>
    <div className="flex gap-2">
        <PButton onClick={() => null} label={"Login"}></PButton>
        <PButton variant="text" onClick={() => setOverlayStatus(false)} color="gray" label="Cancel"/>
    </div>
</div>
</PCard>

Colors #

Since we use the tailwind color palette in our design, you can use the names of all tailwind colors as props. For example : sky red indigo

<POverlay color="yellow">

Accessibility (Not Ready Yet) #

None

Api #

Here you can see all the working features for the overlay component.

Name	Type	Default	Description
status	boolean \| true \| false	false	Status state of the component
closable	boolean \| true \| false	true	Closable state of the component
close	function	void	Close method of the component
color	TwColor \| black \| white	black	Colors of the component

Modal

Radio