generated from muhtadeetaron/nextjs-template
76 lines
2.4 KiB
TypeScript
76 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import BackgroundWrapper from "@/components/BackgroundWrapper";
|
|
import Header from "@/components/Header";
|
|
import React from "react";
|
|
import Image from "next/image";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
const CategoriesPage = () => {
|
|
const router = useRouter();
|
|
|
|
return (
|
|
<BackgroundWrapper>
|
|
<main>
|
|
<Header displayTabTitle="Categories" />
|
|
<div className="grid grid-cols-2 gap-4 pt-6 mx-4">
|
|
<button
|
|
onClick={() => router.push("/categories/topics")}
|
|
className="flex flex-col justify-center items-center border-[1px] border-blue-200 aspect-square rounded-3xl gap-2 bg-white"
|
|
>
|
|
<Image
|
|
src="/images/icons/topic-test.png"
|
|
alt="Topic Test"
|
|
width={85}
|
|
height={85}
|
|
/>
|
|
<span className="font-medium text-[#113768]">Topic Test</span>
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => router.push("/categories/mocks")}
|
|
className="flex flex-col justify-center items-center border-[1px] border-blue-200 aspect-square rounded-3xl gap-2 bg-white"
|
|
>
|
|
<Image
|
|
src="/images/icons/mock-test.png"
|
|
alt="Mock Test"
|
|
width={85}
|
|
height={85}
|
|
/>
|
|
<span className="font-medium text-[#113768]">Mock Test</span>
|
|
</button>
|
|
|
|
<button
|
|
disabled
|
|
className="flex flex-col justify-center items-center border-[1px] border-blue-200 aspect-square rounded-3xl gap-2 bg-white"
|
|
>
|
|
<Image
|
|
src="/images/icons/past-paper.png"
|
|
alt="Past Papers"
|
|
width={68}
|
|
height={68}
|
|
className="opacity-50"
|
|
/>
|
|
<span className="font-medium text-[#113768]/50">Past Papers</span>
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => router.push("/categories/subjects")}
|
|
className="flex flex-col justify-center items-center border-[1px] border-blue-200 aspect-square rounded-3xl gap-2 bg-white"
|
|
>
|
|
<Image
|
|
src="/images/icons/subject-test.png"
|
|
alt="Subject Test"
|
|
width={80}
|
|
height={80}
|
|
/>
|
|
<span className="font-medium text-[#113768]">Subject Test</span>
|
|
</button>
|
|
</div>
|
|
</main>
|
|
</BackgroundWrapper>
|
|
);
|
|
};
|
|
|
|
export default CategoriesPage;
|