+//
+// )
diff --git a/src/app/page.tsx b/src/app/page.tsx
index a4577ae..f305da2 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,11 +1,11 @@
-import { useTheme } from "next-themes";
-import { Button } from "~/components/ui/button";
+import RecentUploads from "~/components/RecentUploads";
export default async function Home() {
return (
-
+
One stop shop of HSC questions!
+
);
}
diff --git a/src/app/question/[question]/page.tsx b/src/app/question/[question]/page.tsx
new file mode 100644
index 0000000..617611a
--- /dev/null
+++ b/src/app/question/[question]/page.tsx
@@ -0,0 +1,83 @@
+import Image from "next/image";
+import React from "react";
+import { api } from "~/trpc/server";
+
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+} from "~/components/ui/card";
+
+import {
+ Collapsible,
+ CollapsibleContent,
+ CollapsibleTrigger,
+} from "~/components/ui/collapsible";
+import Comments from "~/components/Comments";
+
+export default async function Question({
+ params,
+}: {
+ params: { question: string };
+}) {
+ const question = await api.post_question.getQuestion.query({
+ id: params.question,
+ });
+
+ const comments = await api.commentRouter.fetchComments.query({
+ id: params.question,
+ });
+
+ if (!question) return
loading
;
+ return (
+
+
+
+
+ {question.title}
+
+
+ {question.topic}
+
+
+
+
+
+
+
+ Reveal answer
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/app/subjects/[subject]/page.tsx b/src/app/subjects/[subject]/page.tsx
new file mode 100644
index 0000000..edb339c
--- /dev/null
+++ b/src/app/subjects/[subject]/page.tsx
@@ -0,0 +1,44 @@
+import Link from "next/link";
+import React from "react";
+import { Button } from "~/components/ui/button";
+import normaliseURL from "~/server/normaliseURL";
+import { api } from "~/trpc/server";
+
+export default async function Page({
+ params,
+}: {
+ params: { subject: string };
+}) {
+ const data = await api.listTopics.getMain.query({ subject: params.subject });
+
+ console.log("data", data);
+
+ if (!data.topics) return
loading
;
+
+ // this should call trpc on the subjects that then fetches the respective api that fetches the exam questions from the database;
+ return (
+
+
Sort questions by topic
+
+
+ {data.topics.map((topic, key) => (
+
+
+
+ ))}
+
+
+ );
+}
diff --git a/src/app/subjects/[subject]/topics/[topic]/page.tsx b/src/app/subjects/[subject]/topics/[topic]/page.tsx
new file mode 100644
index 0000000..7ac21cf
--- /dev/null
+++ b/src/app/subjects/[subject]/topics/[topic]/page.tsx
@@ -0,0 +1,51 @@
+import { api } from "~/trpc/server";
+import Question_collapsible from "~/components/question_collapsible";
+import { ReadonlyURLSearchParams } from "next/navigation";
+import Link from "next/link";
+import PaginationControls from "~/components/Pagination";
+
+export default async function Topic({
+ params,
+ searchParams,
+}: {
+ params: { topic: string; subject: string };
+ searchParams: { page: number; per_page: number };
+}) {
+ const questions = await api.topics.fetch_questions.query({
+ subject: params.subject,
+ topic: params.topic,
+ });
+
+ const per_pg =
+ searchParams.per_page !== undefined ? Number(searchParams.per_page) : 5;
+ const page = searchParams.page !== undefined ? searchParams.page - 1 : 0;
+ const start_index = page * per_pg;
+ const end_index = start_index + per_pg;
+ const page_slice = [start_index, end_index];
+
+ return (
+
+
+ {questions.questions
+ .slice(page_slice[0], Number(page_slice[1]))
+ .map((question, key: number) => {
+ return (
+
+
+ );
+ })}
+
+
+
= 0}
+ hasNext={end_index + per_pg <= questions.questions.length}
+ />
+
+
+
+ );
+}
diff --git a/src/app/upload_own/page.tsx b/src/app/upload_own/page.tsx
new file mode 100644
index 0000000..afd73af
--- /dev/null
+++ b/src/app/upload_own/page.tsx
@@ -0,0 +1,273 @@
+"use client";
+
+import { useAuth, useUser } from "@clerk/nextjs";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { Check, ChevronsUpDown } from "lucide-react";
+
+import {
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+} from "~/components/ui/command";
+import { Button } from "~/components/ui/button";
+import {
+ Form,
+ FormControl,
+ FormDescription,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "~/components/ui/form";
+import { Input } from "~/components/ui/input";
+
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "~/components/ui/popover";
+import submitForm from "~/server/submitForm";
+import { all_topics, subjects } from "~/server/topics";
+import { cn } from "~/lib/utils";
+import normaliseURL from "~/server/normaliseURL";
+
+const formSchema = z.object({
+ title: z.string().min(2, {
+ message: "Username must be at least 2 characters.",
+ }),
+ subject: z.string(),
+ topic: z.string().min(2, {
+ message: "Topic must be at least 2 characters.",
+ }),
+ question_url: z.instanceof(File),
+
+ answer_url: z.instanceof(File),
+});
+
+export default function ProfileForm() {
+ const { isLoaded, isSignedIn, user } = useUser();
+ // ...
+ const form = useForm
>({
+ resolver: zodResolver(formSchema),
+ defaultValues: {
+ title: "",
+ },
+ });
+
+ if (!isLoaded || !isSignedIn || !user) return please sigin;
;
+ // 2. Define a submit handler.
+ async function onSubmit(values: z.infer) {
+ form.reset();
+ const formData = new FormData();
+ formData.append("title", values.title);
+ formData.append("topic", normaliseURL(values.topic.toLowerCase()));
+ formData.append("question_url", values.question_url);
+ formData.append("answer_url", values.answer_url);
+ formData.append("subject", values.subject);
+ formData.append("name", user?.username ?? "random_name");
+ const response = await submitForm(formData);
+
+ if (!response) {
+ alert("message not submitted");
+ } else {
+ alert("file uploaded");
+ }
+ }
+
+ return (
+
+ );
+}
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
new file mode 100644
index 0000000..ae2cc75
--- /dev/null
+++ b/src/components/Card.tsx
@@ -0,0 +1,78 @@
+"use client";
+import Image, { StaticImageData } from "next/image";
+import Link from "next/link";
+import React, { useEffect, useState } from "react";
+import happy_face from "public/maths/happy face.jpeg";
+import crying_face from "public/maths/ext2at3.jpg";
+import stats from "public/maths/ext1at3.png";
+import normal_face from "public/maths/Normal Face Emoji.jpeg";
+import sad_face from "public/maths/extension 2.jpeg";
+import normaliseURL from "~/server/normaliseURL";
+
+enum emoji_face {
+ happy_face,
+ normal_face,
+ sad_face,
+}
+
+export default function Card({
+ face_emoji,
+ topic,
+ description,
+}: {
+ face_emoji: string;
+ topic: string;
+ description: string;
+}) {
+ const [face, setFace] = useState(happy_face);
+
+ useEffect(() => {
+ if (face_emoji == "4U") setFace(sad_face);
+ else if (face_emoji == "EXT1AT3") setFace(stats);
+ else if (face_emoji == "EXT2AT3") setFace(crying_face);
+ else if (face_emoji == "3U") setFace(normal_face);
+ else setFace(happy_face);
+ }, [face_emoji]);
+
+ return (
+
+ );
+}
diff --git a/src/components/CommandMenu.tsx b/src/components/CommandMenu.tsx
new file mode 100644
index 0000000..19dc554
--- /dev/null
+++ b/src/components/CommandMenu.tsx
@@ -0,0 +1,94 @@
+"use client";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import {
+ CommandDialog,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+} from "~/components/ui/command";
+import normaliseURL from "~/server/normaliseURL";
+import { all_topics, mathsTopics } from "~/server/topics";
+
+export function CommandMenu() {
+ const router = useRouter();
+ const [open, setOpen] = useState(false);
+
+ useEffect(() => {
+ const down = (e: KeyboardEvent) => {
+ if (e.key === ";" && (e.metaKey || e.ctrlKey)) {
+ e.preventDefault();
+ setOpen((open) => !open);
+ }
+ };
+ document.addEventListener("keydown", down);
+ return () => document.removeEventListener("keydown", down);
+ }, []);
+
+ // const [search, setSearch] = useState("");
+
+ const setSearch = (value: string) => {
+ console.log(normaliseURL(value));
+ router.push(`/topics/${normaliseURL(value)}`);
+
+ setOpen(false); // close the modal
+ };
+
+ return (
+
+ console.log("potato")}
+ />
+
+ No results found.
+
+ {mathsTopics.map(({ topic, level }, key) => (
+ {
+ router.replace(
+ `/subjects/${level == "extension1" ? "3U" : level == "extension2" ? "4U" : "2U"}/topics/${normaliseURL(topic.toLowerCase())}`,
+ );
+ setOpen(false);
+ }}
+ >
+ {level == "extension1"
+ ? "3U"
+ : level == "extension2"
+ ? "4U"
+ : "2U"}{" "}
+ {topic}
+
+ ))}
+ {
+ router.push("/subjects/3U");
+ setOpen(false);
+ }}
+ >
+ Maths Extension 1
+
+ {
+ router.push("/subjects/2U");
+ setOpen(false);
+ }}
+ >
+ Maths Advanced
+
+ {
+ router.push("/subjects/4U");
+ setOpen(false);
+ }}
+ >
+ Maths Extension 2
+
+
+
+
+ );
+}
diff --git a/src/components/Comments.tsx b/src/components/Comments.tsx
new file mode 100644
index 0000000..b89d79e
--- /dev/null
+++ b/src/components/Comments.tsx
@@ -0,0 +1,78 @@
+"use client";
+import React, { useRef } from "react";
+import { useRouter } from "next/navigation";
+
+import { useUser } from "@clerk/nextjs";
+import { Button } from "~/components/ui/button";
+import { Input } from "~/components/ui/input";
+import submitComment from "~/server/submitComment";
+import { api } from "~/trpc/server";
+import IndividualComments from "./IndividualComments";
+
+
+export default function Comments({
+ comments,
+ question_id,
+}: {
+ comments: Array<{
+ author: string;
+ content: string;
+ createdAt: string;
+ id: string;
+ questionId: string;
+ updatedAt: string;
+ }>;
+ question_id: string;
+}) {
+ const { isSignedIn, user, isLoaded } = useUser();
+ const inputRef = useRef(null);
+ const router = useRouter();
+ return (
+
+
+
+ {
+ if (
+ inputRef.current &&
+ (inputRef.current as HTMLInputElement)?.value?.trim() === ""
+ ) {
+ alert(
+ "please enter a comment before submitting. dont break my backend please",
+ );
+ return;
+ }
+
+ if (!isSignedIn) {
+ alert("Please sign in to submit a comment");
+ return;
+ }
+
+ const inputValue =
+ (inputRef.current as unknown as HTMLInputElement)?.value ??
+ undefined;
+
+ const current_date = new Date().toISOString();
+
+ router.refresh();
+ window.location.reload();
+
+ void submitComment({
+ id: question_id,
+ comment: inputValue,
+ author: user.username ?? "Anonymous",
+ createdAt: current_date,
+ });
+
+ (inputRef.current as unknown as HTMLInputElement)?.value == "";
+ }}
+ >
+ Submit
+
+
+
+
+ Discussion.
+
+
+ {comments.map((comment, key: number) => {
+ if (comments.length === 0) return;
+ return (
+
+
+ )
+ })}
+
+
+
+
+ {comment.author} :
+
+
+
{convertDateTime(comment.createdAt).toTimeString()}
+
+
{comment.content}
+
= ({
+ subject_name,
+ topic_name,
+ total_items,
+ hasNext,
+ hasPrev,
+}) => {
+ const router = useRouter();
+ const searchParams = useSearchParams();
+
+ const page = searchParams.get("page") ?? "1";
+ const per_page = searchParams.get("per_page") ?? "5";
+
+ return (
+
+
{
+ window.location.replace(
+ `/subjects/${subject_name}/topics/${topic_name}/?page=${Number(page) - 1}&per_page=${per_page}`,
+ );
+ }}
+ >
+ prev page
+
+
+
+ {page}/{Math.ceil(total_items / Number(per_page))}
+
+
+
{
+ window.location.replace(
+ `/subjects/${subject_name}/topics/${topic_name}/?page=${Number(page) + 1}&per_page=${per_page}`,
+ );
+ }}
+ >
+ next page
+
+
+
+ Recent uploads
+
+
+ {recentUploads.map((upload, key: number) => {
+ return (
+
+
+ );
+ })}
+
+
+ {upload.title}
+
+ Topic: {upload.topic}
+ {`Great question. Uploaded by ${upload.name}`}
+
+ );
+}
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 2411270..0a6bbee 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -3,25 +3,58 @@ import Link from "next/link";
import {
NavigationMenu,
NavigationMenuContent,
- NavigationMenuIndicator,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
- NavigationMenuViewport,
navigationMenuTriggerStyle,
} from "~/components/ui/navigation-menu";
+import { Button } from "./ui/button";
+import { useEffect, useState } from "react";
+import { SignInButton, SignOutButton, useUser } from "@clerk/nextjs";
+import { Input } from "./ui/input";
+import { CommandMenu } from "./CommandMenu";
+import Image from "next/image";
+
export default function Navbar() {
+ const { isLoaded, isSignedIn, user } = useUser();
+ console.log(user);
+ const [open, setOpen] = useState(false);
+ const [windowDimensions, setDimensions] = useState<{
+ width: number;
+ height: number;
+ }>();
+ useEffect(() => {
+ setDimensions({
+ width: window.innerWidth,
+ height: window.innerHeight,
+ });
+ }, []);
+ if (!windowDimensions) {
+ return loading
;
+ }
+
+ if (windowDimensions.width < 1024) {
+ // render the mobile menu if the screen size is less than 1024 px;
+ return MobileWindow();
+ }
return (
-
+
{`Kevin's insane study app`}
+ {`HSC Questions`}
+
+ {/* search field */}
+
+ Ctrl ; to search
+
+
@@ -30,12 +63,61 @@ export default function Navbar() {
-
- Software Design and Development
+ Upload your own
+
+
+ {isSignedIn ? (
+
+ ) : (
+ ""
+ )}
+
+
+
+ {isSignedIn ?
+
+
+
+
+ );
+}
+function MobileWindow() {
+ return (
+
+
+
{`HSC Questions`}
+
+
+
+
+
+
+
+ Maths
+
+
+
+
diff --git a/src/components/question_collapsible.tsx b/src/components/question_collapsible.tsx
new file mode 100644
index 0000000..28f2160
--- /dev/null
+++ b/src/components/question_collapsible.tsx
@@ -0,0 +1,98 @@
+"use client";
+import Image from "next/image";
+import { ThumbsUp, ThumbsDown } from "lucide-react";
+import { likeQuestion, dislikeQuestion } from "~/server/userEngagement";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+} from "~/components/ui/card";
+
+import {
+ Collapsible,
+ CollapsibleContent,
+ CollapsibleTrigger,
+} from "~/components/ui/collapsible";
+
+// implement pagination because too many things are being loaded at once;
+
+function Question_collapsible({
+ question,
+}: {
+ question: {
+ id: string;
+ title: string;
+ topic: string;
+ question_url: string;
+ answer_url: string;
+ };
+}) {
+ const pathName = usePathname();
+
+ console.log(pathName);
+ return (
+
+
+
+ {question.title}
+
+
+ {question.topic}
+
+
+
+
+
+
+ Reveal answer
+
+
+
+
+
+
+
+
+ likeQuestion(question.id)}>
+
+ dislikeQuestion(question.id)}>
+
+
+
+
+
+ );
+}
+
+export default Question_collapsible;
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 0000000..901efad
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "~/lib/utils"
+
+const Card = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/src/components/ui/collapsible.tsx b/src/components/ui/collapsible.tsx
new file mode 100644
index 0000000..9fa4894
--- /dev/null
+++ b/src/components/ui/collapsible.tsx
@@ -0,0 +1,11 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
new file mode 100644
index 0000000..6be0b00
--- /dev/null
+++ b/src/components/ui/command.tsx
@@ -0,0 +1,155 @@
+"use client";
+
+import * as React from "react";
+import { type DialogProps } from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
+
+import { cn } from "~/lib/utils";
+import { Dialog, DialogContent } from "~/components/ui/dialog";
+
+const Command = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+
+ {children}
+
+
+
+ );
+};
+
+const CommandInput = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>((props, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ) => {
+ return (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+ {children}
+
+ Close
+
+
+
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ = FieldPath,
+> = {
+ name: TName;
+};
+
+const FormFieldContext = React.createContext(
+ {} as FormFieldContextValue,
+);
+
+const FormField = <
+ TFieldValues extends FieldValues = FieldValues,
+ TName extends FieldPath = FieldPath,
+>({
+ ...props
+}: ControllerProps) => {
+ return (
+
+
+ );
+};
+
+const useFormField = () => {
+ const fieldContext = React.useContext(FormFieldContext);
+ const itemContext = React.useContext(FormItemContext);
+ const { getFieldState, formState } = useFormContext();
+
+ const fieldState = getFieldState(fieldContext.name, formState);
+
+ if (!fieldContext) {
+ throw new Error("useFormField should be used within ");
+ }
+
+ const { id } = itemContext;
+
+ return {
+ id,
+ name: fieldContext.name,
+ formItemId: `${id}-form-item`,
+ formDescriptionId: `${id}-form-item-description`,
+ formMessageId: `${id}-form-item-message`,
+ ...fieldState,
+ };
+};
+
+type FormItemContextValue = {
+ id: string;
+};
+
+const FormItemContext = React.createContext(
+ {} as FormItemContextValue,
+);
+
+const FormItem = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => {
+ const id = React.useId();
+
+ return (
+
+
+
+ );
+});
+FormItem.displayName = "FormItem";
+
+const FormLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => {
+ const { error, formItemId } = useFormField();
+
+ return (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ ...props }, ref) => {
+ const { error, formItemId, formDescriptionId, formMessageId } =
+ useFormField();
+
+ return (
+
+>(({ className, ...props }, ref) => {
+ const { formDescriptionId } = useFormField();
+
+ return (
+
+ );
+});
+FormDescription.displayName = "FormDescription";
+
+const FormMessage = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, children, ...props }, ref) => {
+ const { error, formMessageId } = useFormField();
+ const body = error ? String(error?.message) : children;
+
+ if (!body) {
+ return null;
+ }
+
+ return (
+
+ {body}
+
+ );
+});
+FormMessage.displayName = "FormMessage";
+
+export {
+ useFormField,
+ Form,
+ FormItem,
+ FormLabel,
+ FormControl,
+ FormDescription,
+ FormMessage,
+ FormField,
+};
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
new file mode 100644
index 0000000..31e5142
--- /dev/null
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,24 @@
+import * as React from "react";
+
+import { cn } from "~/lib/utils";
+
+export type InputProps = React.InputHTMLAttributes;
+
+const Input = React.forwardRef(
+ ({ className, type, ...props }, ref) => {
+ return (
+ ,
+ React.ComponentPropsWithoutRef &
+ VariantProps
+>(({ className, ...props }, ref) => (
+
-
+
));
NavigationMenuIndicator.displayName =
diff --git a/src/components/ui/pagination.tsx b/src/components/ui/pagination.tsx
new file mode 100644
index 0000000..7b07b75
--- /dev/null
+++ b/src/components/ui/pagination.tsx
@@ -0,0 +1,118 @@
+import * as React from "react";
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
+
+import { cn } from "~/lib/utils";
+import { ButtonProps, buttonVariants } from "~/components/ui/button";
+import Link from "next/link";
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+ &
+ React.ComponentProps<"a">;
+
+const PaginationLink = ({
+ className,
+ isActive,
+ size = "icon",
+ ...props
+}: PaginationLinkProps) => (
+ ) => (
+
+ Previous
+
+);
+PaginationPrevious.displayName = "PaginationPrevious";
+
+const PaginationNext = ({
+ className,
+ ...props
+}: React.ComponentProps) => (
+
+ Next
+
+);
+PaginationNext.displayName = "PaginationNext";
+
+const PaginationEllipsis = ({
+ className,
+ ...props
+}: React.ComponentProps<"span">) => (
+
+ More pages
+
+);
+PaginationEllipsis.displayName = "PaginationEllipsis";
+
+export {
+ Pagination,
+ PaginationContent,
+ PaginationEllipsis,
+ PaginationItem,
+ PaginationLink,
+ PaginationNext,
+ PaginationPrevious,
+};
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
new file mode 100644
index 0000000..d45a633
--- /dev/null
+++ b/src/components/ui/popover.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "~/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+
+
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
new file mode 100644
index 0000000..1091153
--- /dev/null
+++ b/src/components/ui/select.tsx
@@ -0,0 +1,160 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "~/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+ span]:line-clamp-1",
+ className
+ )}
+ {...props}
+ >
+ {children}
+
+
+
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+))
+SelectScrollDownButton.displayName =
+ SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, position = "popper", ...props }, ref) => (
+
+
+
+ {children}
+
+
+
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+
+ {children}
+
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+