calendar tweaks

Author: devklick

src/common/utils/dateUtils.ts

@@ -1,5 +1,14 @@
 const MS_PER_DAY = 24 * 60 * 60 * 1000;
 
+const ordinalSuffixes = {
+  one: "st",
+  two: "nd",
+  few: "rd",
+  other: "th",
+  many: "th",
+  zero: "th",
+} as const satisfies Record<Intl.LDMLPluralRule, string>;
+
 export function getMonthName(
   monthIndex: number,
   locale = "en-US",
@@ -12,14 +21,43 @@ export function getMonthName(
 
 export function getDayName(
   dayIndex: number,
+  locale?: "en-US",
+  format?: "long" | "short",
+): string;
+export function getDayName(
+  dayIndex: Date,
+  locale?: "en-US",
+  format?: "long" | "short",
+): string;
+export function getDayName(
+  d: number | Date,
   locale = "en-US",
   format: "long" | "short" = "short",
 ) {
+  const dayIndex = typeof d === "number" ? d : d.getDay();
   return new Intl.DateTimeFormat(locale, { weekday: format }).format(
     new Date(2021, 0, dayIndex + 3),
   );
 }
 
+export function getDateOrdinal(
+  dateOfMonth: number,
+  locale?: Intl.UnicodeBCP47LocaleIdentifier,
+): string;
+export function getDateOrdinal(
+  date: Date,
+  locale?: Intl.UnicodeBCP47LocaleIdentifier,
+): string;
+export function getDateOrdinal(
+  date: Date | number,
+  locale: Intl.UnicodeBCP47LocaleIdentifier = "en-US",
+): string {
+  const ordinalPlurals = new Intl.PluralRules(locale, { type: "ordinal" });
+
+  const d = typeof date === "number" ? date : date.getDate();
+  return `${d}${ordinalSuffixes[ordinalPlurals.select(d)]}`;
+}
+
 export function isToday(
   year: number,
   month: number,

src/components/BottomBar/styles.ts

@@ -1,4 +1,5 @@
 import styled from "@emotion/styled";
+import { transparentize } from "polished";
 
 export const StyledContainer = styled.div`
   min-height: 0;
@@ -20,9 +21,11 @@ export const StyledBottomBar = styled.div<{ backgroundColor: string }>`
   display: flex;
   background-color: var(--ui-color-primary);
   border-radius: 50px;
-  background-color: #2e3440;
-  box-shadow: 0 -2px 10px 1px #11172b, 0 -2px 3px #bebebe inset;
-  background-color: ${(props) => props.backgroundColor};
+  background-color: ${(props) => transparentize(0.5, props.backgroundColor)};
+  backdrop-filter: blur(5px);
+  box-shadow:
+    0 -2px 10px 1px #11172b,
+    0 -2px 3px #bebebe inset;
 `;
 
 export const StyledContents = styled.div`

src/components/TopBar/styles.ts

@@ -1,4 +1,5 @@
 import styled from "@emotion/styled";
+import { transparentize } from "polished";
 
 export const StyledTopBarContainer = styled.div`
   grid-area: top-bar;
@@ -13,8 +14,11 @@ export const StyledTopBar = styled.div<{ backgroundColor: string }>`
   height: 100%;
   width: 100%;
   border-radius: 15px;
-  box-shadow: 0 -2px 10px 1px #11172b, 0 -2px 3px #bebebe inset;
-  background-color: ${(props) => props.backgroundColor};
+  box-shadow:
+    0 -2px 10px 1px #11172b,
+    0 -2px 3px #bebebe inset;
+  background-color: ${(props) => transparentize(0.5, props.backgroundColor)};
+  backdrop-filter: blur(5px);
 `;
 
 export const StyledTopBarContents = styled.div`

src/programs/Calendar/Calendar.tsx

@@ -34,14 +34,19 @@ const Calendar = forwardRef<CalendarHandles, CalendarProps>((_props, ref) => {
       className="calendar"
     >
       <CalendarNavigation
-        month={calendar.cursor.getMonth()}
-        year={calendar.cursor.getFullYear()}
+        date={calendar.cursor}
+        onClickNextDay={calendar.nextDay}
+        onClickPrevDay={calendar.prevDay}
         onClickNextMonth={calendar.nextMonth}
         onClickNextYear={calendar.nextYear}
         onClickPrevMonth={calendar.prevMonth}
         onClickPrevYear={calendar.prevYear}
       />
-      <CalendarSidebar date={calendar.cursor} />
+      <CalendarSidebar
+        date={calendar.cursor}
+        nextDay={calendar.nextDay}
+        prevDay={calendar.prevDay}
+      />
       <StyledCalendarDaysFrame frameColor={accentColor}>
         <StyledCalendarDays
           borderColor={accentColor}

src/programs/Calendar/CalendarNavigation/CalendarNavigation.tsx

@@ -1,4 +1,8 @@
-import { getMonthName } from "../../../common/utils/dateUtils";
+import {
+  getDateOrdinal,
+  getDayName,
+  getMonthName,
+} from "../../../common/utils/dateUtils";
 import Button from "../../../components/Button";
 import useSystemSettings from "../../../stores/systemSettingsStore";
 import {
@@ -7,16 +11,18 @@ import {
 } from "./styles";
 
 interface StyledNavigationProps {
-  month: number;
-  year: number;
+  date: Date;
+  onClickPrevDay(): void;
+  onClickNextDay(): void;
   onClickPrevMonth(): void;
   onClickNextMonth(): void;
   onClickPrevYear(): void;
   onClickNextYear(): void;
 }
 export default function CalendarNavigation({
-  month,
-  year,
+  date,
+  onClickNextDay,
+  onClickPrevDay,
   onClickNextMonth,
   onClickNextYear,
   onClickPrevMonth,
@@ -26,6 +32,9 @@ export default function CalendarNavigation({
     s.fontColor,
     s.mainColor,
   ]);
+  const day = date.getDate();
+  const month = date.getMonth();
+  const year = date.getFullYear();
   return (
     <StyledCalendarNavigation className="calendar__nav">
       <StyledCalendarNavigationSection className="calendar__nav-section">
@@ -71,6 +80,28 @@ export default function CalendarNavigation({
           group="horizontal"
         >{`>`}</Button>
       </StyledCalendarNavigationSection>
+
+      <StyledCalendarNavigationSection className="calendar__nav-section">
+        <Button
+          backgroundColor={buttonColor}
+          color={fontColor}
+          onClick={onClickPrevDay}
+          group="horizontal"
+        >{`<`}</Button>
+        <Button
+          backgroundColor={buttonColor}
+          color={fontColor}
+          group="horizontal"
+        >
+          {`${getDayName(date)} ${getDateOrdinal(day)}`}
+        </Button>
+        <Button
+          backgroundColor={buttonColor}
+          color={fontColor}
+          onClick={onClickNextDay}
+          group="horizontal"
+        >{`>`}</Button>
+      </StyledCalendarNavigationSection>
     </StyledCalendarNavigation>
   );
 }

src/programs/Calendar/CalendarNavigation/styles.tsx

@@ -6,10 +6,10 @@ interface StyledCalendarNavigationProps {}
 export const StyledCalendarNavigation = styled.div<StyledCalendarNavigationProps>`
   width: 100%;
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr;
   gap: 20px;
   grid-area: nav;
-  padding: 6px 0;
+  padding-bottom: 5px;
 `;
 
 export const StyledCalendarNavigationSection = styled.div<StyledCalendarNavigationSectionProps>`

src/programs/Calendar/CalendarSidebar/CalendarSidebar.tsx

@@ -3,14 +3,13 @@ import { StyledCalendarSidebar } from "./styles";
 
 interface CalendarSidebarProps {
   date: Date;
+  prevDay(): void;
+  nextDay(): void;
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export default function CalendarSidebar({ date }: CalendarSidebarProps) {
-  // const events = useCalendarEvents({ date });
+// eslint-disable-next-line no-empty-pattern
+export default function CalendarSidebar({}: CalendarSidebarProps) {
   return (
-    <StyledCalendarSidebar className="calendar__side-bar">
-      {date.toISOString()}
-    </StyledCalendarSidebar>
+    <StyledCalendarSidebar className="calendar__side-bar"></StyledCalendarSidebar>
   );
 }

src/programs/Calendar/hooks/useCalendar.ts

@@ -10,6 +10,12 @@ interface CalendarDay {
 export function useCalendar() {
   const [cursor, setCursor] = useState(startOfDay(new Date()));
 
+  const nextDay = () =>
+    setCursor((d) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + 1));
+
+  const prevDay = () =>
+    setCursor((d) => new Date(d.getFullYear(), d.getMonth(), d.getDate() - 1));
+
   const nextMonth = () =>
     setCursor((d) => new Date(d.getFullYear(), d.getMonth() + 1, d.getDate()));
 
@@ -50,6 +56,8 @@ export function useCalendar() {
   useEffect(() => setDays(getCalendarDays), [cursor, getCalendarDays]);
 
   return {
+    prevDay,
+    nextDay,
     prevMonth,
     nextMonth,
     prevYear,

src/programs/Calendar/styles.ts

@@ -12,10 +12,10 @@ export const StyledCalendarLayout = styled.div<StyledCalendarLayoutProps>`
   /* flex-direction: column; */
   box-sizing: border-box;
   grid-template-areas:
-    "nav nav side"
+    "nav nav nav"
     "days days side"
     "days days side";
-  grid-template-rows: 50px 1fr 1fr;
+  grid-template-rows: 40px 1fr 1fr;
   grid-template-columns: 1fr 1fr minmax(150px, 1fr);
 `;