calendar tweaks

Author: devklick

src/components/Button/Button.tsx

@@ -1,20 +1,29 @@
-import { PropsWithChildren } from "react";
+import { forwardRef, PropsWithChildren, useCallback } from "react";
 import { StyledButton, StyledButtonProps } from "./styles";
 
 interface ButtonProps extends StyledButtonProps {
   onClick?: () => void;
   disabled?: boolean;
 }
 
-function Button({
-  onClick,
-  children,
-  ...rest
-}: PropsWithChildren<ButtonProps>) {
-  return (
-    <StyledButton {...rest} onClick={onClick}>
-      {children}
-    </StyledButton>
-  );
-}
+const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProps>>(
+  ({ onClick, children, ...rest }, ref) => {
+    const onRef = useCallback(
+      (el: HTMLButtonElement | null) => {
+        if (typeof ref === "function") {
+          ref(el);
+        } else if (ref != null) {
+          ref.current = el;
+        }
+      },
+      [ref],
+    );
+    return (
+      <StyledButton {...rest} onClick={onClick} ref={onRef}>
+        {children}
+      </StyledButton>
+    );
+  },
+);
+
 export default Button;

src/programs/Calculator/styles.ts

@@ -12,7 +12,7 @@ export const StyledCalc = styled.div`
   /* padding: 5px; */
   border-radius: 10px;
   box-sizing: border-box;
-  gap: 10px;
+  gap: 5px;
 `;
 
 export const StyledInputOutput = styled.div<{
@@ -38,6 +38,7 @@ export const StyledInputOutputContents = styled.div`
   text-shadow: 2px 2px 4px rgb(0, 0, 0, 0.5);
   overflow-x: auto;
   width: 100%;
+  text-align: end;
 `;
 
 export const StyledButtons = styled.div`

src/programs/Calendar/CalendarSidebar/CalendarSidebar.tsx

@@ -1,5 +1,8 @@
 // import useCalendarEvents from "../hooks/useCalendarEvents";
-import { StyledCalendarSidebar } from "./styles";
+import { useRef } from "react";
+import CalendarTimeSlot from "../CalendarTimeSlot/CalendarTimeSlot";
+import { StyledCalendarSidebar, StyledDayBreak } from "./styles";
+import useSystemSettings from "../../../stores/systemSettingsStore";
 
 interface CalendarSidebarProps {
   date: Date;
@@ -9,7 +12,16 @@ interface CalendarSidebarProps {
 
 // eslint-disable-next-line no-empty-pattern
 export default function CalendarSidebar({}: CalendarSidebarProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [breakColor] = useSystemSettings((s) => [s.secondaryColor]);
   return (
-    <StyledCalendarSidebar className="calendar__side-bar"></StyledCalendarSidebar>
+    <StyledCalendarSidebar className="calendar__side-bar" ref={ref}>
+      {Array.from({ length: 25 }).map((_, i) => (
+        <>
+          <CalendarTimeSlot hour={i} />
+          {i < 24 && <StyledDayBreak color={breakColor} />}
+        </>
+      ))}
+    </StyledCalendarSidebar>
   );
 }

src/programs/Calendar/CalendarSidebar/styles.ts

@@ -3,7 +3,18 @@ import styled from "@emotion/styled";
 interface StyledCalendarSidebarProps {}
 export const StyledCalendarSidebar = styled.div<StyledCalendarSidebarProps>`
   width: 100%;
-  max-width: 300px;
   height: 100%;
   grid-area: side;
+  overflow: auto;
+  padding-left: 6px;
+  box-sizing: border-box;
+`;
+
+interface StyledDayBreakProps {
+  color: string;
+}
+export const StyledDayBreak = styled.hr<StyledDayBreakProps>`
+  width: 100%;
+  margin: 0;
+  background-color: ${(p) => p.color};
 `;

src/programs/Calendar/CalendarTimeSlot/CalendarTimeSlot.tsx

@@ -0,0 +1,37 @@
+import { useCallback, useRef } from "react";
+import useSystemSettings from "../../../stores/systemSettingsStore";
+import Button from "../../../components/Button";
+
+interface CalendarTimeSlotProps {
+  hour: number;
+}
+
+export default function CalendarTimeSlot({ hour }: CalendarTimeSlotProps) {
+  const currentHour = useRef(new Date().getHours());
+  const [backgroundColor, fontColor] = useSystemSettings((s) => [
+    s.mainColor,
+    s.fontColor,
+  ]);
+
+  const onRef = useCallback(
+    (el: null | HTMLButtonElement) => {
+      if (el && hour === currentHour.current) {
+        el.scrollIntoView();
+      }
+    },
+    [currentHour, hour],
+  );
+
+  return (
+    <Button
+      borderRadius={0}
+      height={60}
+      backgroundColor={backgroundColor}
+      color={fontColor}
+      justifyContent="start"
+      ref={onRef}
+    >
+      {hour.toString().padStart(2, "0")}:00
+    </Button>
+  );
+}