foldbank-mock/web/app/components/CenterCol.tsx

import styles from './centerCol.module.css'
import React from 'react'
import CenterLoading from './CenterLoading'


export default function CenterCol() {
  // const bankDetails = {
  //   banks: [{
  //     bankName: "SBI",
  //     bankFullName: "State Bank of India",
  //     bankLogoSrc: "/sbi.svg",
  //     bankAccountBalance: "27,932",
  //     infoLines: [{
  //       title: "Account Number",
  //       value: "34536896852",
  //     }, {
  //       title: "IFSC Code",
  //       value: "SBIN0006586",
  //     }, {
  //       title: "Swift BIC",
  //       value: "6895206BB",
  //     }, {
  //       title: "Holder's Name",
  //       value: "Nishant Verma",
  //     }]
  //   }, {
  //     bankName: "HDFC",
  //     bankFullName: "HDFC Bank",
  //     bankLogoSrc: "/hdfc.svg",
  //     bankAccountBalance: "2,58,630",
  //     infoLines: [{
  //       title: "Account Number",
  //       value: "92531805286",
  //     }, {
  //       title: "IFSC Code",
  //       value: "HDFC0002233",
  //     }, {
  //       title: "Swift BIC",
  //       value: "HDFCINBBBNG",
  //     }, {
  //       title: "Holder's Name",
  //       value: "Nishant Verma",
  //     }]
  //   }, {
  //     bankName: "Axis",
  //     bankFullName: "Axis Bank",
  //     bankLogoSrc: "/axis.svg",
  //     bankAccountBalance: "55,410",
  //     infoLines: [{
  //       title: "Account Number",
  //       value: "34536896852",
  //     }, {
  //       title: "IFSC Code",
  //       value: "SBIN0006586",
  //     }, {
  //       title: "Swift BIC",
  //       value: "6895206BB",
  //     }, {
  //       title: "Holder's Name",
  //       value: "Nishant Verma",
  //     }]
  //   }, {
  //     bankName: "ICICI",
  //     bankFullName: "ICICI Bank",
  //     bankLogoSrc: "/icici.svg",
  //     bankAccountBalance: "7,932",
  //     infoLines: [{
  //       title: "Account Number",
  //       value: "92531805286",
  //     }, {
  //       title: "IFSC Code",
  //       value: "HDFC0002233",
  //     }, {
  //       title: "Swift BIC",
  //       value: "HDFCINBBBNG",
  //     }, {
  //       title: "Holder's Name",
  //       value: "Nishant Verma",
  //     }]
  //   }]
  // }
  let today = new Date()
  let curHr = today.getHours()
  let greet = "Good "

  if (curHr < 12) {
    greet += 'morning'
  } else if (curHr < 18) {
    greet += 'afternoon'
  } else {
    greet += 'evening'
  }

  const nth = function(d) {
    if (d > 3 && d < 21) return 'th';
    switch (d % 10) {
      case 1:  return "st";
      case 2:  return "nd";
      case 3:  return "rd";
      default: return "th";
    }
  }

  const dayName = function(d) {
    const days = ["Monday", "Tuesday", "Wednesday", "Thhursday", "Friday", "Saturday", "Sunday"]
    return days[d-1]
  }

  return (
    <div className={styles.main}>
      <div className={styles.title}>
        <div className={styles.greeting}>{greet}, Nishant</div>
        <div className={styles.date}>{`It's ${today.getDate()}${nth(today.getDate())} of ${today.toLocaleString('default', { month: 'long' })}, a ${dayName(today.getDay())}`}</div>
      </div>
      <CenterLoading />
    </div>
  )
}