Skip to content

Commit 798d6cf

Browse files
FahadLiveFahadLive
committed
Changed quick actions and responsive dashboard
1 parent bff5e3b commit 798d6cf

4 files changed

Lines changed: 86 additions & 49 deletions

File tree

‎src/components/home/QuickActions.tsx‎

Lines changed: 57 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -85,30 +85,63 @@ export const QuickActions = () => {
8585
data-testid="quick-actions"
8686
className="pt-6 w-full space-y-4 md:mt-0 md:flex md:h-full md:flex-col md:justify-center lg:pt-0 xl:pt-0"
8787
>
88-
<div className="space-y-4 md:flex md:flex-1 md:flex-col md:justify-center lg:space-y-6 xl:space-y-8">
89-
{/* External Links */}
90-
<div className="grid grid-cols-3 gap-3 lg:gap-4 xl:gap-5">
91-
<QuickActionButton
92-
text="College Login"
93-
onClick={() =>
94-
window.open(
95-
"https://gecskp.etlab.in/user/login",
96-
"_blank",
97-
"noopener,noreferrer",
98-
)
99-
}
100-
/>
101-
<QuickActionButton
102-
text="Bus Time"
103-
onClick={() => alert("Bus Time feature coming soon!")}
104-
/>
105-
{quickActionItems.map((item, index) => (
106-
<QuickActionButton
107-
key={index}
108-
text={item.text}
109-
onClick={item.onClick}
110-
/>
111-
))}
88+
<div className="md:flex md:flex-1 md:flex-col md:justify-center">
89+
{/* Alternating 2 and 3 Column Layout */}
90+
<div className="space-y-4 md:flex md:flex-1 md:flex-col md:justify-center lg:space-y-6 xl:space-y-8">
91+
{/* First row - 2 columns */}
92+
<div className="grid grid-cols-2 gap-3 lg:gap-4 xl:gap-5">
93+
{quickActionItems.slice(0, 2).map((item, index) => (
94+
<QuickActionButton
95+
key={index}
96+
text={item.text}
97+
onClick={item.onClick}
98+
/>
99+
))}
100+
</div>
101+
102+
{/* Second row - 3 columns */}
103+
<div className="grid grid-cols-3 gap-3 lg:gap-4 xl:gap-5">
104+
{quickActionItems.slice(2, 5).map((item, index) => (
105+
<QuickActionButton
106+
key={index + 2}
107+
text={item.text}
108+
onClick={item.onClick}
109+
/>
110+
))}
111+
</div>
112+
113+
{/* Third row - 2 columns */}
114+
<div className="grid grid-cols-2 gap-3 lg:gap-4 xl:gap-5">
115+
{quickActionItems.slice(5, 7).map((item, index) => (
116+
<QuickActionButton
117+
key={index + 5}
118+
text={item.text}
119+
onClick={item.onClick}
120+
/>
121+
))}
122+
</div>
123+
124+
{/* Fourth row - 3 columns */}
125+
<div className="grid grid-cols-3 gap-3 lg:gap-4 xl:gap-5">
126+
{quickActionItems.slice(7, 10).map((item, index) => (
127+
<QuickActionButton
128+
key={index + 7}
129+
text={item.text}
130+
onClick={item.onClick}
131+
/>
132+
))}
133+
</div>
134+
135+
{/* Fifth row - 2 columns */}
136+
<div className="grid grid-cols-2 gap-3 lg:gap-4 xl:gap-5">
137+
{quickActionItems.slice(10, 12).map((item, index) => (
138+
<QuickActionButton
139+
key={index + 10}
140+
text={item.text}
141+
onClick={item.onClick}
142+
/>
143+
))}
144+
</div>
112145
</div>
113146
</div>
114147
</div>

‎src/components/home/ResponsiveDashboard.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ const ResponsiveDashboard = () => {
77
<div className="min-h-screen">
88
<div className="mx-auto max-w-[var(--max-screen-size)] pt-4">
99
<main className="px-3 pb-24">
10-
<div className="md:flex md:h-[calc(100vh-12rem)] md:gap-6 lg:gap-8">
11-
<section className="flex flex-col justify-center h-[64vh] w-full md:h-full md:w-1/2">
10+
<div className="md:flex lg:h-[calc(100vh-12rem)] md:gap-6 lg:gap-8">
11+
<section className="flex flex-col justify-center h-[64vh] w-full md:h-full md:w-1/2 mx-auto">
1212
<TimeTableBlock />
1313
</section>
1414
<QuickActions />

‎src/components/home/TimeTable.tsx‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,20 +11,24 @@ export const TimeTableBlock = () => {
1111
const prevDay = () => {
1212
setCurrentDay((prev) => (prev === 0 ? 4 : prev - 1));
1313
};
14+
1415
return (
1516
<div
16-
className="border border-[var(--text)] rounded-lg p-4 "
17+
className="border border-[var(--text)] rounded-lg p-4 h-96 flex flex-col"
1718
data-testid="timetable-block"
1819
>
19-
<img
20-
className="absolute h-16"
21-
src="/scribble-circle.svg"
22-
alt="Scribbled circle overlay"
23-
/>
24-
<h2 className="flex ml-2 p-3 w-fit text-[2rem] font-medium text-[var(--text)]">
25-
Time Table
26-
</h2>
27-
<div className="flex h-[calc(100%-2rem)] rounded-xl flex-nowrap overflow-x-auto space-x-4">
20+
<div className="relative flex-shrink-0">
21+
<img
22+
className="absolute h-16 z-10"
23+
src="/scribble-circle.svg"
24+
alt="Scribbled circle overlay"
25+
/>
26+
<h2 className="flex ml-2 p-3 w-fit text-[2rem] font-medium text-[var(--text)]">
27+
Time Table
28+
</h2>
29+
</div>
30+
31+
<div className="flex-1 flex rounded-xl min-h-0">
2832
<TimeTableSlider
2933
currentDay={currentDay}
3034
onPrevDay={prevDay}

‎src/components/home/TimeTableSlider.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
"use client";
2-
3-
import type { DayData } from "@/types/types"; // Ensure you import the correct type
2+
import type { DayData } from "@/types/types";
43
import { ChevronLeft, ChevronRight } from "lucide-react";
54
import React from "react";
65
import { timetableData } from "./TimeTableData";
@@ -12,48 +11,49 @@ type TimeTableSliderProps = {
1211
onNextDay: () => void;
1312
};
1413

15-
// Default empty schedule to prevent errors
1614
const defaultDayData: DayData = { day: "No Data", schedule: [] };
1715

1816
export const TimeTableSlider = ({
1917
currentDay,
2018
onPrevDay,
2119
onNextDay,
2220
}: TimeTableSliderProps) => {
23-
// Ensure currentDay is within valid range
2421
const currentDayData: DayData = timetableData[currentDay] ?? defaultDayData;
2522

2623
return (
27-
<div className="group relative h-fit w-full">
28-
<div className="h-full overflow-hidden rounded-lg">
29-
<TimeTableDay day={currentDayData} />
24+
<div className="group relative w-full h-full min-h-0 flex flex-col">
25+
{/* Main timetable content - expands to fill available space */}
26+
<div className="flex-1 min-h-0 overflow-hidden rounded-lg">
27+
<div className="w-full h-full">
28+
<TimeTableDay day={currentDayData} />
29+
</div>
3030
</div>
3131

3232
{/* Left Navigation Button */}
3333
<button
34-
type="button" // Fixed missing type
34+
type="button"
3535
onClick={onPrevDay}
3636
disabled={currentDay <= 0}
37-
className="absolute left-2 top-1/2 -translate-y-1/2 rounded-full bg-black/50 p-2 opacity-0 transition-opacity disabled:opacity-50 group-hover:opacity-100"
37+
className="absolute left-2 top-1/2 -translate-y-1/2 rounded-full bg-black/50 p-2 opacity-0 transition-opacity disabled:opacity-50 group-hover:opacity-100 z-10"
3838
>
3939
<ChevronLeft className="size-5 text-white" />
4040
</button>
4141

4242
{/* Right Navigation Button */}
4343
<button
44-
type="button" // Fixed missing type
44+
type="button"
4545
onClick={onNextDay}
4646
disabled={currentDay >= timetableData.length - 1}
47-
className="absolute right-2 top-1/2 -translate-y-1/2 rounded-full bg-black/50 p-2 opacity-0 transition-opacity disabled:opacity-50 group-hover:opacity-100"
47+
className="absolute right-2 top-1/2 -translate-y-1/2 rounded-full bg-black/50 p-2 opacity-0 transition-opacity disabled:opacity-50 group-hover:opacity-100 z-10"
4848
>
4949
<ChevronRight className="size-5 text-white" />
5050
</button>
5151

5252
{/* Pagination Indicators */}
53-
<div className="absolute bottom-4 left-1/2 flex -translate-x-1/2 space-x-2">
53+
<div className="absolute bottom-4 left-1/2 flex -translate-x-1/2 space-x-2 z-10">
5454
{timetableData.map((day, index) => (
5555
<div
56-
key={day.day} // Use 'day.day' instead of index if it's unique
56+
key={day.day}
5757
className={`size-2 rounded-full ${
5858
currentDay === index ? "bg-black" : "bg-black/50"
5959
}`}

0 commit comments

Comments
 (0)