dropdown+scheduler

src/components/Scheduler/Cell/index.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+interface CellProps {
+  colIndex: number;
+  index: number;
+  term?: string;
+  handleClick?: (e: React.MouseEvent) => void;
+  isEventable?: boolean;
+}
+
+export const Cell = ({
+  colIndex,
+  index,
+  term,
+  handleClick,
+  isEventable,
+}: CellProps) => {
+  return (
+    <div id={`${colIndex} ${index}`} className="td" onClick={handleClick}>
+      {isEventable || term}
+    </div>
+  );
+};

src/components/Scheduler/Column/index.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { Cell } from "../Cell";
+
+interface ColumnProps {
+  hours: Array<string>;
+  handleClick?: (e: React.MouseEvent) => void;
+  children?: React.ReactNode;
+  colIndex?: number;
+  isEventable?: boolean;
+}
+
+export const Column = ({
+  hours,
+  colIndex,
+  isEventable,
+  children,
+  ...rest
+}: ColumnProps) => {
+  return (
+    <div className="tbody__column">
+      {hours.map((hour, index) => (
+        <Cell
+          {...rest}
+          index={index}
+          term={hour}
+          colIndex={colIndex || 0}
+          isEventable={isEventable}
+        />
+      ))}
+      {children}
+    </div>
+  );
+};

src/components/Scheduler/SchedulerEvent/index.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+
+interface SchedulerEventProps {
+  events: Array<number>;
+  colIndex: number;
+}
+
+export const SchedulerEvent = ({ events, colIndex }: SchedulerEventProps) => {
+  const handleEventClick = (e: React.MouseEvent) => {
+    const eventDiv = e.target as HTMLDivElement;
+    eventDiv.style.backgroundColor = "#1547C5";
+  };
+
+  return (
+    <>
+      {events.map((event, index) => (
+        <div
+          id={`eventCol${colIndex}eventRow${index}`}
+          style={{
+            position: "absolute",
+            top: 80 * index + 5,
+            left:5,
+            backgroundColor: "#839FE6",
+            color: "white",
+            borderRadius: 5,
+            padding:5,
+            width: "80%",
+            height: 60,
+            display: "none",
+          }}
+          onClick={handleEventClick}
+        >
+          :)
+        </div>
+      ))}
+    </>
+  );
+};

src/components/Scheduler/index.scss

@@ -0,0 +1,30 @@
+.scheduler {
+  margin-top: 20px;
+  border-collapse: collapse;
+
+  .thead {
+    display: flex;
+    width: 100%;
+  }
+
+  .tbody {
+    display: flex;
+    &__column {
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      flex: 1;
+    }
+  }
+
+  .td,
+  .th {
+    border: 1px solid #ddd;
+    padding: 10px;
+    text-align: center;
+    flex: 1;
+  }
+  .td:hover {
+    background-color: #ddd;
+  }
+}

src/components/Scheduler/index.tsx

@@ -0,0 +1,76 @@
+import React, { useEffect } from "react";
+import { useState } from "react";
+import "./index.scss";
+import { SchedulerEvent } from "./SchedulerEvent";
+import { Column } from "./Column";
+const days = ["", "poniedziałek", "wtorek", "środa", "czwartek", "piątek"];
+
+const hours = [
+  "8:00",
+  "9:00",
+  "10:00",
+  "11:00",
+  "12:00",
+  "13:00",
+  "14:00",
+  "15:00",
+  "16:00",
+  "17:00",
+  "18:00",
+  "19:00",
+  "20:00",
+  "21:00",
+];
+
+let events: Array<number> = [];
+for (let i = 0; i < hours.length / 2; i++) {
+  events.push(i);
+}
+
+let terms = ["Zawsze", "jest pora", "na kurde", "lody", "koral"];
+
+export const Scheduler = () => {
+  const [currentEventsIds, setCurrentEventsIds] = useState<Array<string>>([]);
+  useEffect(() => {
+    const displayEvents = () => {
+      currentEventsIds.map((eventId: string) => {
+        const event = document.getElementById(eventId);
+        event!.style.display = "block";
+      });
+    };
+    displayEvents();
+  }, [currentEventsIds]);
+
+  const handleClick = (e: React.MouseEvent) => {
+    const cellId = e.currentTarget.id;
+    const column = cellId.slice(0, 1);
+    const row = cellId.slice(1);
+    const eventId = `eventCol${column}eventRow${Math.floor(parseInt(row) / 2)}`;
+
+    setCurrentEventsIds((currentEventsIds) => [...currentEventsIds, eventId]);
+  };
+
+  return (
+    <>
+      <div className="scheduler">
+        <div className="thead">
+          {days.map((day, index) => (
+            <div className="th" key={index}>
+              {day}
+            </div>
+          ))}
+        </div>
+        <div className="tbody">
+          <Column hours={hours}  isEventable={false}/>
+          {terms.map((_, colIndex) => (
+            <Column hours={hours} handleClick={handleClick} colIndex={colIndex} isEventable={true} >
+              <SchedulerEvent events={events} colIndex={colIndex} />
+            </Column>
+          ))}
+        </div>
+        
+
+      </div>
+    </>
+  );
+};