Mvrs

import { fromUnixTime, format, getHours } from "date-fns";
import { fromUnixTime, format, getHours } from "date-fns";

const timeSlots = [
  { startTime: 1653998400, endTime: 1654002000 }, //6-31-2022 8am  to 6-31-2022 9am
  { startTime: 1654002000, endTime: 1654005600 }, //6-31-2022 9am  to 6-31-2022 10am
  { startTime: 1654012800, endTime: 1654016400 }, //6-31-2022 12pm  to 6-31-2022 1pm
  { startTime: 1654084864, endTime: 1654088464 }, //2022-06-01 8am to 2022-06-01 9am
  { startTime: 1654092064, endTime: 1654095664 }, // 2022-06-01 10am to 2022-06-01 11am
  { startTime: 1654106464, endTime: 1654110064 }, // 2022-06-01 2pm to 2022-06-01 3pm

Mvrs

Image source

https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png

Try resize it!

• ![](https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png | width=100)

Mvrs

import React, { useState } from "react";
import "./styles.css";

// Author: Marlon Johnson
// Date: 4/15/2021
// Time: 00:08

// another to way for a user to control the state of our app
// a way to avoid prop-drilling
// which can cause collision issues when your logic becomes difficult to maintain