Skip to content

Commit

Permalink
💄 initiate shadcn
Browse files Browse the repository at this point in the history
  • Loading branch information
nrmnqdds committed Jan 3, 2024
1 parent a4f153a commit 83983b6
Show file tree
Hide file tree
Showing 37 changed files with 1,288 additions and 433 deletions.
67 changes: 31 additions & 36 deletions app/(home)/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,23 @@
"use client";

import { Fragment, useEffect, useState } from "react";
import ProfileDropdown from "@/components/ProfileDropdown";
import { ThemeSwitcher } from "@/components/ThemeSwitcher";
import ImaluumProvider from "@/context/ImaluumProvider";
import { getDate } from "@/lib/common/time";
import LOGO from "@/public/logo-landing-page.png";
import { Dialog, Menu, Transition } from "@headlessui/react";
import {
Bars3Icon,
CalendarIcon,
Cog6ToothIcon,
FlagIcon,
HomeIcon,
XMarkIcon,
FlagIcon,
} from "@heroicons/react/24/outline";
import { ChevronDownIcon } from "@heroicons/react/20/solid";
import { usePathname, useRouter } from "next/navigation";
import Link from "next/link";
import LOGO from "@/public/logo-landing-page.png";
import Image from "next/image";
import { getDate } from "@/lib/client/time";
import { ThemeSwitcher } from "@/components/ThemeSwitcher";
import ProfileDropdown from "@/components/ProfileDropdown";
import ImaluumProvider from "@/context/ImaluumProvider";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { Fragment, useEffect, useState } from "react";

const navigation = [
{ name: "Dashboard", href: "/dashboard", icon: HomeIcon },
Expand Down Expand Up @@ -114,7 +113,7 @@ export default function HomeLayout({
</div>
</Transition.Child>
{/* Sidebar component, swap this element with another sidebar if you like */}
<div className="flex grow flex-col gap-y-5 overflow-y-auto bg-slate-100 dark:bg-zinc-900 px-6 pb-4">
<div className="flex grow flex-col gap-y-5 overflow-y-auto bg-background px-6 pb-4">
<div className="flex h-32 shrink-0 items-center justify-center">
<Image
width={64}
Expand All @@ -134,16 +133,16 @@ export default function HomeLayout({
href={item.href}
className={classNames(
pathname === item.href
? "bg-gray-50 text-cyan-600"
: "text-gray-700 hover:text-cyan-600 hover:bg-gray-50 dark:hover:bg-zinc-800",
? "bg-gray-50 text-primary"
: "text-gray-700 hover:text-primary hover:bg-gray-50 dark:hover:bg-zinc-800",
"group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
)}
>
<item.icon
className={classNames(
pathname === item.href
? "text-cyan-600"
: "text-gray-400 group-hover:text-cyan-600",
? "text-primary"
: "text-accent group-hover:text-primary",
"h-6 w-6 shrink-0"
)}
aria-hidden="true"
Expand All @@ -154,18 +153,18 @@ export default function HomeLayout({
))}
</ul>
</li>
<li className="mt-auto">
{/* <li className="mt-auto">
<Link
href="/doctor/profile"
className="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-700 hover:bg-gray-50 hover:text-cyan-600"
className="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-700 hover:bg-gray-50 hover:text-primary"
>
<Cog6ToothIcon
className="h-6 w-6 shrink-0 text-gray-400 group-hover:text-cyan-600"
className="h-6 w-6 shrink-0 text-gray-400 group-hover:text-primary"
aria-hidden="true"
/>
Settings
</Link>
</li>
</li> */}
</ul>
</nav>
</div>
Expand All @@ -178,7 +177,7 @@ export default function HomeLayout({
{/* Static sidebar for desktop */}
<div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
{/* Sidebar component, swap this element with another sidebar if you like */}
<div className="flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-400 dark:border-zinc-600 bg-slate-100 dark:bg-zinc-900 px-6 pb-4">
<div className="flex grow flex-col gap-y-5 overflow-y-auto border-r border-border bg-background px-6 pb-4">
<div className="flex h-32 shrink-0 items-center justify-center">
<Image
width={64}
Expand All @@ -198,16 +197,16 @@ export default function HomeLayout({
href={item.href}
className={classNames(
pathname === item.href
? "bg-gray-50 dark:bg-zinc-950 text-cyan-600"
: "text-gray-700 dark:text-gray-500 hover:text-cyan-600 hover:bg-gray-50 dark:hover:bg-zinc-800",
? "bg-primary-foreground text-primary"
: "text-accent hover:text-primary hover:bg-accent",
"group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
)}
>
<item.icon
className={classNames(
pathname === item.href
? "text-cyan-600"
: "text-gray-400 dark:text-gray-600 group-hover:text-cyan-600",
? "text-primary"
: "text-accent group-hover:text-primary",
"h-6 w-6 shrink-0"
)}
aria-hidden="true"
Expand All @@ -230,10 +229,10 @@ export default function HomeLayout({

{/* <Link
href="#"
className="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-700 dark:text-gray-500 hover:bg-gray-50 hover:bg-zinc-800 hover:text-cyan-600"
className="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-700 dark:text-gray-500 hover:bg-gray-50 hover:bg-zinc-800 hover:text-primary"
>
<Cog6ToothIcon
className="h-6 w-6 shrink-0 text-gray-400 dark:text-gray-600 group-hover:text-cyan-600"
className="h-6 w-6 shrink-0 text-gray-400 dark:text-gray-600 group-hover:text-primary"
aria-hidden="true"
/>
Settings
Expand All @@ -245,10 +244,10 @@ export default function HomeLayout({
</div>

<div className="lg:pl-72">
<div className="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-gray-400 dark:border-zinc-600 bg-slate-100 dark:bg-zinc-900 px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8">
<div className="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-border bg-background px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8">
<button
type="button"
className="-m-2.5 p-2.5 text-gray-700 dark:text-gray-500 lg:hidden"
className="-m-2.5 p-2.5 text-accent lg:hidden"
onClick={() => setSidebarOpen(true)}
>
<span className="sr-only">Open sidebar</span>
Expand All @@ -263,12 +262,8 @@ export default function HomeLayout({

<div className="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
<div className="relative flex items-center gap-5 flex-1 text-xs md:text-sm">
<h1 className="text-zinc-900 dark:text-slate-100 font-bold">
{getDate()}
</h1>
<h2 className="text-zinc-900 dark:text-slate-100 font-bold">
{currentTime}
</h2>
<h1 className="text-foreground font-bold">{getDate()}</h1>
<h2 className="text-foreground font-bold">{currentTime}</h2>
</div>
{/* <form className="relative flex flex-1" action="#" method="GET">
<label htmlFor="search-field" className="sr-only">
Expand All @@ -280,7 +275,7 @@ export default function HomeLayout({
/>
<input
id="search-field"
className="bg-slate-100 dark:bg-zinc-900 block h-full w-full border-0 py-0 pl-8 pr-0 text-zinc-800 dark:text-slate-200 placeholder:text-gray-400 focus:ring-0 sm:text-sm"
className="bg-background block h-full w-full border-0 py-0 pl-8 pr-0 text-zinc-800 dark:text-slate-200 placeholder:text-gray-400 focus:ring-0 sm:text-sm"
placeholder="Search..."
type="search"
name="search"
Expand All @@ -299,7 +294,7 @@ export default function HomeLayout({
</div>
</div>

<main className="lg:overflow-x-hidden">
<main className="lg:overflow-x-hidden bg-background">
<Transition
appear={true}
show={true}
Expand Down
18 changes: 9 additions & 9 deletions app/(home)/result/page.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
"use client";

import { useEffect, useState } from "react";
import ResultSwitcher from "@/components/ResultSwitcher";
import { ChevronUpDownIcon } from "@heroicons/react/20/solid";
import useResult from "@/hooks/useResult";
import LottiePlayer from "@/components/LottiePlayer";
import { ResultSwitcher } from "@/components/ResultSwitcher";

type SortedSubjectType = {
courseCode: string;
Expand Down Expand Up @@ -62,7 +62,7 @@ const Page = () => {
const failedCount = subjects.length - passedCount;

return (
<main className="flex-1 flex flex-col gap-2 min-h-screen px-2 bg-zinc-900">
<main className="flex-1 flex flex-col gap-2 min-h-screen px-2">
{!result ? (
<div className="h-[500px] w-full flex flex-col items-center justify-center">
<LottiePlayer
Expand All @@ -80,9 +80,9 @@ const Page = () => {
setSession={setSession}
/>

<div className="flex flex-col lg:flex-row gap-5 items-center justify-center w-full h-full rounded-xl border-2 border-slate-400/10 bg-neutral-200 p-4 dark:bg-neutral-900">
<div className="flex flex-col lg:flex-row gap-5 items-center justify-center w-full h-full rounded-xl border border-border p-4 bg-background">
<div className="flex-1 flex flex-row items-center justify-center gap-5">
<div className="flex flex-col gap-2 items-center justify-center bg-neutral-300 p-4 font-semibold dark:bg-neutral-800 border-zinc-700 rounded-xl border">
<div className="flex flex-col gap-2 items-center justify-center bg-card p-4 font-semibold border-border rounded-xl border">
<h1 className="text-zinc-300 text-xs lg:text-sm">
Subjects Taken:
</h1>
Expand All @@ -100,13 +100,13 @@ const Page = () => {
</div>
</div>
<div className="flex-1 flex flex-row items-center justify-center gap-5">
<div className="flex flex-col gap-2 items-center justify-center bg-neutral-300 p-4 font-semibold dark:bg-neutral-800 border-zinc-700 rounded-xl border">
<div className="flex flex-col gap-2 items-center justify-center p-4 font-semibold bg-card border-border rounded-xl border">
<h1 className="text-zinc-300 text-xs lg:text-sm">Status:</h1>
<p className="text-zinc-100 text-sm lg:text-xl">
{notes.status}
</p>
</div>
<div className="flex flex-col gap-2 items-center justify-center bg-neutral-300 p-4 font-semibold dark:bg-neutral-800 border-zinc-700 rounded-xl border">
<div className="flex flex-col gap-2 items-center justify-center bg-card p-4 font-semibold border-border rounded-xl border">
<h1 className="text-zinc-300 text-xs lg:text-sm">Remarks:</h1>
<p className="text-zinc-100 text-sm lg:text-xl">
{notes.remarks}
Expand All @@ -115,7 +115,7 @@ const Page = () => {
</div>
</div>

<div className="flex flex-col items-center justify-center w-full h-full rounded-xl border-2 border-slate-400/10 bg-neutral-200 p-4 dark:bg-neutral-900">
<div className="flex flex-col items-center justify-center w-full h-full rounded-xl border border-border bg-background p-4">
<div id="header" className="w-full flex flex-row mb-2 p-4">
<div className="flex-1 w-fit flex items-center justify-start text-xs sm:text-sm">
<p className="zinc-100 lg:pl-24">Subject Code</p>
Expand All @@ -130,7 +130,7 @@ const Page = () => {
<button
name="sort-button"
type="button"
className="flex items-center justify-center bg-zinc-800 p-2 rounded-md active:border-slate-400 border border-slate-400/10"
className="flex items-center justify-center bg-card p-2 rounded-md active:border-slate-400 border border-border"
onClick={toggleSortOrder}
>
<ChevronUpDownIcon
Expand All @@ -147,7 +147,7 @@ const Page = () => {
<div
key={index}
id="subjects"
className="w-full flex flex-row bg-neutral-300 p-4 dark:bg-neutral-800 border-zinc-700 rounded-xl border"
className="w-full flex flex-row bg-card p-4 border-border rounded-xl border"
>
<div className="flex-1 w-fit flex items-center justify-start text-xs sm:text-sm">
<p className="zinc-100 lg:pl-24">{subject.courseCode}</p>
Expand Down
15 changes: 5 additions & 10 deletions app/(home)/schedule/page.tsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,19 @@
"use client";

import { useState } from "react";
import Timetable from "@/components/schedule";
import ScheduleSwitcher from "@/components/ScheduleSwitcher";
import Timetable from "@/components/schedule";
import useSchedule from "@/hooks/useSchedule";
import { useState } from "react";

const Page = () => {
const [subjects, setSubjects] = useState<Courses[]>();
const { schedule } = useSchedule();

return (
<div className="flex-1 min-h-screen">
{!schedule ? (
<div>Loading...</div>
) : (
<div className="w-fit p-2">
{/* <SessionSwitcher setEvents={setEvents} /> */}
<ScheduleSwitcher courses={schedule} setEvents={setSubjects} />
</div>
)}
<div className="w-fit p-2">
<ScheduleSwitcher courses={schedule} setEvents={setSubjects} />
</div>
<Timetable events={!subjects ? [] : subjects[0].schedule} />
</div>
);
Expand Down
58 changes: 58 additions & 0 deletions app/globals.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,61 @@
@tailwind base;
@tailwind components;
@tailwind utilities;


@layer base {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--primary: 142.1 76.2% 36.3%;
--primary-foreground: 355.7 100% 97.3%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 142.1 76.2% 36.3%;
--radius: 0.5rem;
}

.dark {
--background: 20 14.3% 4.1%;
--foreground: 0 0% 95%;
--card: 24 9.8% 10%;
--card-foreground: 0 0% 95%;
--popover: 0 0% 9%;
--popover-foreground: 0 0% 95%;
--primary: 142.1 70.6% 45.3%;
--primary-foreground: 144.9 80.4% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--muted: 0 0% 15%;
--muted-foreground: 240 5% 64.9%;
--accent: 12 6.5% 15.1%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 85.7% 97.3%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 142.4 71.8% 29.2%;
}
}


@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
10 changes: 5 additions & 5 deletions app/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import "./globals.css";
import { Poppins } from "next/font/google";
import Script from "next/script";
import { ThemeProvider } from "@/context/ThemeProvider";
import { QueryProvider } from "@/context/QueryProvider";
import { ThemeProvider } from "@/context/ThemeProvider";
import { Metadata } from "next";
import { Poppins } from "next/font/google";
import Script from "next/script";
import { Toaster } from "react-hot-toast";
import "./globals.css";

const poppins = Poppins({ subsets: ["latin"], weight: "400", display: "swap" });

Expand All @@ -20,7 +20,7 @@ export default function RootLayout({
}) {
return (
<html lang="en">
<body className={poppins.className}>
<body className={`scrollbar-hide ${poppins.className}`}>
<Script
src="https://beamanalytics.b-cdn.net/beam.min.js"
data-token="09a05d6b-9ccf-4902-8ad0-e623689d586a"
Expand Down
9 changes: 6 additions & 3 deletions app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,19 +1,22 @@
import ScrollUp from "@/components/ScrollUp";
import ScrollProgress from "@/components/ScrollbarProgress";
import Feature from "@/components/sections/FeatureSection";
import Hero from "@/components/sections/HeroSection";
import Footer from "@/components/sections/Footer";
import Hero from "@/components/sections/HeroSection";
import Testimonial from "@/components/sections/TestimonialSection";
import LenisSmoothScroll from "@/context/LenisProvider";

export default function Home() {
return (
<>
<LenisSmoothScroll>
<ScrollProgress />
<main className="relative isolate overflow-hidden bg-slate-100 dark:bg-zinc-900">
<ScrollUp />
<Hero />
<Feature />
<Testimonial />
</main>
<Footer />
</>
</LenisSmoothScroll>
);
}
Loading

0 comments on commit 83983b6

Please sign in to comment.