From 31b9d5f08129701705e62e1e700d78954e5c2eea Mon Sep 17 00:00:00 2001 From: nitin mohan Date: Sat, 27 Jun 2026 13:36:04 +0530 Subject: [PATCH] Refactor frontend components for improved maintainability --- app/(auth)/sign-in/page.tsx | 71 ++----- app/(auth)/sign-up/page.tsx | 113 +++------- app/dashboard/page.tsx | 193 ++++-------------- components/auth/auth-input.tsx | 40 ++++ components/auth/oauth-button.tsx | 25 +++ components/dashboard/quick-action-card.tsx | 83 ++++++++ components/dashboard/recent-activity-card.tsx | 59 ++++++ 7 files changed, 298 insertions(+), 286 deletions(-) create mode 100644 components/auth/auth-input.tsx create mode 100644 components/auth/oauth-button.tsx create mode 100644 components/dashboard/quick-action-card.tsx create mode 100644 components/dashboard/recent-activity-card.tsx diff --git a/app/(auth)/sign-in/page.tsx b/app/(auth)/sign-in/page.tsx index fb46add..cc5ce17 100644 --- a/app/(auth)/sign-in/page.tsx +++ b/app/(auth)/sign-in/page.tsx @@ -1,6 +1,9 @@ import Link from "next/link"; import { ArrowRight } from "lucide-react"; +import { AuthInput } from "@/components/auth/auth-input"; +import { OAuthButton } from "@/components/auth/oauth-button"; + export default function SignInPage() { return (
@@ -14,45 +17,27 @@ export default function SignInPage() {
-
- - -
+ -
-
- + Forgot password? -
- -
+ } + /> +

Don't have an account?{" "} diff --git a/app/(auth)/sign-up/page.tsx b/app/(auth)/sign-up/page.tsx index f31adb3..8567689 100644 --- a/app/(auth)/sign-up/page.tsx +++ b/app/(auth)/sign-up/page.tsx @@ -1,6 +1,9 @@ import Link from "next/link"; import { ArrowRight } from "lucide-react"; +import { AuthInput } from "@/components/auth/auth-input"; +import { OAuthButton } from "@/components/auth/oauth-button"; + export default function SignUpPage() { return (

@@ -15,73 +18,35 @@ export default function SignUpPage() {
-
- - -
-
- - -
-
- -
- - -
- -
- - -

- Must be at least 8 characters long. -

+ + + +
- +

Already have an account?{" "} diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx index 6db3e19..19eb110 100644 --- a/app/dashboard/page.tsx +++ b/app/dashboard/page.tsx @@ -1,13 +1,8 @@ import Link from "next/link"; -import { - GraduationCap, - BookOpen, - FileText, - Sparkles, - ArrowRight, - Clock, - ChevronRight, -} from "lucide-react"; +import { GraduationCap, BookOpen, FileText, Sparkles } from "lucide-react"; + +import { QuickActionCard } from "@/components/dashboard/quick-action-card"; +import { RecentActivityCard } from "@/components/dashboard/recent-activity-card"; export default function DashboardPage() { return ( @@ -44,81 +39,34 @@ export default function DashboardPage() {

- {/* Action 1 */} - -
- -
-
-

- Browse Universities -

-

- Explore available institutions and branches. -

-
- - - - {/* Action 2 */} - + -
- -
-
-

- View Syllabus -

-

- Access detailed syllabus breakdowns. -

-
- - - - {/* Action 3 */} - + -
- -
-
-

- Explore PYQs -

-

- Practice with past year questions. -

-
- - - - {/* Action 4 */} - + -
- -
-
-

- AI Assistant -

-

- Get instant help from the AI tutor. -

-
- - + icon={Sparkles} + colorVariant="purple" + />
@@ -137,77 +85,24 @@ export default function DashboardPage() {
- {/* Placeholder Card 1 */} - -
-
-
- -
-
-

- Mathematics-III (BT-401) -

-

- RGPV • CSE • Semester 4 -

-
-
-
- - 2 hours ago -
-
-
-
- - Unit 2: Laplace Transform -
-
- Resume{" "} - -
-
- - - {/* Placeholder Card 2 */} - + -
-
-
- -
-
-

- Data Structures (BT-402) -

-

- RGPV • CSE • Semester 4 -

-
-
-
- - Yesterday -
-
-
-
- - Viewing June-2024 PYQ -
-
- Resume{" "} - -
-
- + timeAgo="Yesterday" + progressText="Viewing June-2024 PYQ" + statusColor="bg-orange-500" + type="file" + />
diff --git a/components/auth/auth-input.tsx b/components/auth/auth-input.tsx new file mode 100644 index 0000000..eb0c4b0 --- /dev/null +++ b/components/auth/auth-input.tsx @@ -0,0 +1,40 @@ +import { ReactNode } from "react"; + +interface AuthInputProps { + id: string; + type: string; + label: string; + placeholder: string; + required?: boolean; + hint?: ReactNode; + rightElement?: ReactNode; +} + +export function AuthInput({ + id, + type, + label, + placeholder, + required = true, + hint, + rightElement, +}: AuthInputProps) { + return ( +
+
+ + {rightElement} +
+ + {hint &&

{hint}

} +
+ ); +} diff --git a/components/auth/oauth-button.tsx b/components/auth/oauth-button.tsx new file mode 100644 index 0000000..e0518a8 --- /dev/null +++ b/components/auth/oauth-button.tsx @@ -0,0 +1,25 @@ +export function OAuthButton() { + return ( + + ); +} diff --git a/components/dashboard/quick-action-card.tsx b/components/dashboard/quick-action-card.tsx new file mode 100644 index 0000000..787dcd5 --- /dev/null +++ b/components/dashboard/quick-action-card.tsx @@ -0,0 +1,83 @@ +import Link from "next/link"; +import { ArrowRight, LucideIcon } from "lucide-react"; + +type ColorVariant = "blue" | "indigo" | "emerald" | "purple"; + +interface QuickActionCardProps { + title: string; + description: string; + href: string; + icon: LucideIcon; + colorVariant: ColorVariant; +} + +export function QuickActionCard({ + title, + description, + href, + icon: Icon, + colorVariant, +}: QuickActionCardProps) { + const variants = { + blue: { + wrapper: + "hover:border-[#1D4ED8]/30 focus-visible:ring-[#1D4ED8] dark:hover:border-blue-500/30", + iconBox: + "bg-blue-50 text-[#1D4ED8] group-hover:bg-[#1D4ED8] group-hover:text-white dark:bg-blue-500/10 dark:text-blue-400 dark:group-hover:bg-blue-500 dark:group-hover:text-white", + title: "group-hover:text-[#1D4ED8] dark:group-hover:text-blue-400", + arrow: "group-hover:text-[#1D4ED8] dark:group-hover:text-blue-400", + }, + indigo: { + wrapper: + "hover:border-indigo-500/30 focus-visible:ring-indigo-500 dark:hover:border-indigo-500/30", + iconBox: + "bg-indigo-50 text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white dark:bg-indigo-500/10 dark:text-indigo-400 dark:group-hover:bg-indigo-500 dark:group-hover:text-white", + title: "group-hover:text-indigo-600 dark:group-hover:text-indigo-400", + arrow: "group-hover:text-indigo-600 dark:group-hover:text-indigo-400", + }, + emerald: { + wrapper: + "hover:border-emerald-500/30 focus-visible:ring-emerald-500 dark:hover:border-emerald-500/30", + iconBox: + "bg-emerald-50 text-emerald-600 group-hover:bg-emerald-600 group-hover:text-white dark:bg-emerald-500/10 dark:text-emerald-400 dark:group-hover:bg-emerald-500 dark:group-hover:text-white", + title: "group-hover:text-emerald-600 dark:group-hover:text-emerald-400", + arrow: "group-hover:text-emerald-600 dark:group-hover:text-emerald-400", + }, + purple: { + wrapper: + "hover:border-purple-500/30 focus-visible:ring-purple-500 dark:hover:border-purple-500/30", + iconBox: + "bg-purple-50 text-purple-600 group-hover:bg-purple-600 group-hover:text-white dark:bg-purple-500/10 dark:text-purple-400 dark:group-hover:bg-purple-500 dark:group-hover:text-white", + title: "group-hover:text-purple-600 dark:group-hover:text-purple-400", + arrow: "group-hover:text-purple-600 dark:group-hover:text-purple-400", + }, + }; + + const style = variants[colorVariant]; + + return ( + +
+ +
+
+

+ {title} +

+

+ {description} +

+
+ + + ); +} diff --git a/components/dashboard/recent-activity-card.tsx b/components/dashboard/recent-activity-card.tsx new file mode 100644 index 0000000..05d035a --- /dev/null +++ b/components/dashboard/recent-activity-card.tsx @@ -0,0 +1,59 @@ +import Link from "next/link"; +import { BookOpen, FileText, Clock, ChevronRight } from "lucide-react"; + +interface RecentActivityCardProps { + title: string; + subtitle: string; + href: string; + timeAgo: string; + progressText: string; + statusColor: string; + type: "book" | "file"; +} + +export function RecentActivityCard({ + title, + subtitle, + href, + timeAgo, + progressText, + statusColor, + type, +}: RecentActivityCardProps) { + const Icon = type === "book" ? BookOpen : FileText; + + return ( + +
+
+
+ +
+
+

+ {title} +

+

{subtitle}

+
+
+
+ + {timeAgo} +
+
+
+
+ + {progressText} +
+
+ Resume{" "} + +
+
+ + ); +}