Boring Component Library

Timeline Component

Snippet

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>
    </>
  );
}

Component UI

Modal Component

Snippet

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>
    </>
  );
}

Component UI