nextjs improvements, auth dummies, auth guard

2024-12-31 15:30:28 +00:00
parent 872ad76f59
commit e06753fb24
19 changed files with 448 additions and 16 deletions
@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+import BaseLayout from "@/components/Layout/BaseLayout";
+import { routing } from "@/i18n/routing";
+import UnauthenticatedLayout from "@/components/Layout/UnauthenticatedLayout";
+import AuthGuard from "@/components/guards/AuthGuard";
+
+type Props = {
+	children: ReactNode;
+};
+
+export default function RootLayout({ children }: Props) {
+	return (
+		<BaseLayout locale={routing.defaultLocale}>
+			<AuthGuard>
+				<UnauthenticatedLayout>{children}</UnauthenticatedLayout>
+			</AuthGuard>
+		</BaseLayout>
+	);
+}
@@ -0,0 +1,97 @@
+"use client";
+import React, { FormEvent, useState } from "react";
+
+const Dashboard = () => {
+	const [newEntry, setNewEntry] = useState({ task: "", duration: "" });
+	const [entries, setEntries] = useState([
+		{ id: 1, task: "Meeting", duration: "1h 30m", date: "2024-12-30" },
+		{ id: 2, task: "Development", duration: "3h 45m", date: "2024-12-29" },
+		{ id: 3, task: "Code Review", duration: "2h", date: "2024-12-28" },
+	]);
+
+	const handleInputChange = (e: FormEvent) => {
+		const { name, value } = e.target as HTMLInputElement;
+		setNewEntry({ ...newEntry, [name]: value });
+	};
+
+	const handleAddEntry = () => {
+		if (!newEntry.task || !newEntry.duration) return;
+		const newId = entries.length ? entries[entries.length - 1].id + 1 : 1;
+		setEntries([
+			...entries,
+			{ id: newId, ...newEntry, date: new Date().toISOString().split("T")[0] },
+		]);
+		setNewEntry({ task: "", duration: "" });
+	};
+
+	return (
+		<main className="min-h-screen bg-gray-100 py-10 px-4">
+			<div className="max-w-4xl mx-auto bg-white rounded-lg shadow-lg p-6">
+				{/* Timer Section */}
+				<section className="mb-8">
+					<h2 className="text-2xl font-bold text-gray-800 mb-4">New Entry</h2>
+					<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+						<input
+							type="text"
+							name="task"
+							value={newEntry.task}
+							onChange={handleInputChange}
+							placeholder="Task Name"
+							className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+						/>
+						<input
+							type="text"
+							name="duration"
+							value={newEntry.duration}
+							onChange={handleInputChange}
+							placeholder="Duration (e.g., 1h 30m)"
+							className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+						/>
+						<button
+							onClick={handleAddEntry}
+							className="w-full bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-500 transition duration-200"
+						>
+							Add Entry
+						</button>
+					</div>
+				</section>
+
+				{/* Past Entries Section */}
+				<section>
+					<h2 className="text-2xl font-bold text-gray-800 mb-4">
+						Past Entries
+					</h2>
+					<div className="bg-gray-50 p-4 rounded-lg shadow-inner">
+						{entries.length
+							? (
+								<ul className="divide-y divide-gray-300">
+									{entries.map((entry) => (
+										<li
+											key={entry.id}
+											className="py-3 flex justify-between items-center"
+										>
+											<div>
+												<p className="text-lg font-medium text-gray-700">
+													{entry.task}
+												</p>
+												<p className="text-sm text-gray-500">
+													{entry.date} - {entry.duration}
+												</p>
+											</div>
+										</li>
+									))}
+								</ul>
+							)
+							: (
+								<p className="text-gray-500">
+									No entries yet. Start adding some!
+								</p>
+							)}
+					</div>
+				</section>
+			</div>
+		</main>
+	);
+};
+
+export default Dashboard;