import {
Separator,
TimelineItem,
TimelineItemBody,
TimelineItemContent,
TimelineItemDate,
TimelineItemTitle,
} from "@deepakr-28/boring-component-library";
export default function Home() {
return (
<>
<TimelineItem>
<TimelineItemDate>28 Jan, 2023</TimelineItemDate>
<Separator />
<TimelineItemContent>
<TimelineItemTitle>
Today was a good day
</TimelineItemTitle>
<TimelineItemBody>
Seven, even back do' Lil Joe
I picked up the cash flow
Then we played bones, and I'm yellin' "Domino!"
Plus nobody I know got killed in South Central LA
Today was a good day!
</TimelineItemBody>
</TimelineItemContent>
</TimelineItem>
</>
);
}
import {Modal} from "@deepakr-28/boring-component-library";
<Modal show={show} onClose={modalHandler}>
// Modal Content goes here
// You can add anything here
</Modal>
| PropName |datatype | |---|---|---|---|---| | show | boolean | | onClose | function |
Example
import { useState } from "react";
import { Modal } from "@deepakr-28/boring-component-library";
export default function Home() {
const [show, setShow] = useState(false); // stores modal state
// function opens/closes modal based on actions
function modalHandler() {
setShow(!show);
}
return (
<>
/*
when we click on the image
modal opens
*/
<img
alt="image"
src={`https://images.pexels.com/photos/14130951/pexels-photo-14130951.jpeg`}
height="250"
width="250"
onClick={() => modalHandler()}
/>
// Our modal component
<Modal show={show} onClose={modalHandler}>
// Modal content, same image, but bigger!
<img
alt="image"
src={`https://images.pexels.com/photos/14130951/pexels-photo-14130951.jpeg`}
height="700"
width="700"
}
/>
</Modal>
</>
);
}