Validation accordian can download input/output

@/components/ui/pagination.tsx

@@ -0,0 +1,117 @@
+import * as React from "react"
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { ButtonProps, buttonVariants } from "@/components/ui/button"
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+)
+Pagination.displayName = "Pagination"
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...props}
+  />
+))
+PaginationContent.displayName = "PaginationContent"
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+))
+PaginationItem.displayName = "PaginationItem"
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<"a">
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className
+    )}
+    {...props}
+  />
+)
+PaginationLink.displayName = "PaginationLink"
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn("gap-1 pl-2.5", className)}
+    {...props}
+  >
+    <ChevronLeft className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+)
+PaginationPrevious.displayName = "PaginationPrevious"
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn("gap-1 pr-2.5", className)}
+    {...props}
+  >
+    <span>Next</span>
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+)
+PaginationNext.displayName = "PaginationNext"
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+)
+PaginationEllipsis.displayName = "PaginationEllipsis"
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+}

src/components/Forms/CreateProblemForm/index.tsx

@@ -24,10 +24,10 @@ const TabList = [
 		value: "requirement",
 		label: "Requirement",
 	},
-	{
-		value: "privacy",
-		label: "Privacy",
-	},
+	// {
+	// 	value: "privacy",
+	// 	label: "Privacy",
+	// },
 	{
 		value: "groups",
 		label: "Manage Groups & Permissions",

src/components/Tables/ProblemTables/MyProblemsTable.tsx

@@ -163,7 +163,12 @@ const columns: ColumnDef<ProblemPopulateTestcases>[] = [
 
 	{
 		accessorKey: "difficulty",
-		header: "Difficulty",
+		header: ({ column }) => (
+			<DataTableSortableLayout onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}>
+				Difficulty
+			</DataTableSortableLayout>
+
+		),
 		cell: ({ row }) => (
 			<DifficultyBadge level={row.original.difficulty}/>
 		),

src/components/TestcaseValidationAccordion.tsx

@@ -1,4 +1,4 @@
-import { TestcaseStatusIndicatorColor } from "../constants/TestcaseStatusIndicatorColor";
+import { FileDown } from "lucide-react";
 import { RuntimeResult } from "../types/apis/Problem.api";
 import { TestcaseModel } from "../types/models/Problem.model";
 import {
@@ -11,6 +11,37 @@ import { Badge } from "./shadcn/Badge";
 import { Label } from "./shadcn/Label";
 import { Textarea } from "./shadcn/Textarea";
 
+const minimizer = (text: string | null): string => {
+	const LIMIT = 250;
+
+	if (!text) return "";
+
+	if (text.length > LIMIT) {
+		return text.slice(0, LIMIT) + ` ... (${text.length - LIMIT} more)`;
+	}
+	return text;
+};
+
+const downloadTextfile = (filename: string, text: string | null) => {
+	if (!text) return;
+
+	const element = document.createElement("a");
+	const file = new Blob([text], { type: "text/plain" });
+	element.href = URL.createObjectURL(file);
+	element.download = filename;
+	document.body.appendChild(element); // Required for this to work in FireFox
+	element.click();
+};
+
+const DownloadMiniButton = ({...args}:{
+	className?: string;
+	onClick?: React.MouseEventHandler<HTMLParagraphElement>;
+}) => {
+	return (
+		<p  className="flex items-center cursor-pointer hover:text-green-500" {...args}><FileDown size={16} className="mr-1" /> Download .txt</p>
+	)
+}
+
 const TestcaseValidationInstance = ({
 	value,
 	inputValue,
@@ -44,32 +75,39 @@ const TestcaseValidationInstance = ({
 				)}
 			</AccordionTrigger>
 			<AccordionContent>
-				<div className="flex gap-5 pl-1">
-					<div className="w-5/12">
-						<Label>Input</Label>
+				<div className="flex gap-5 px-1">
+					<div className="w-1/2">
+						<div className="flex justify-between">
+							<Label>Input</Label>
+							<DownloadMiniButton onClick={() => downloadTextfile("input.txt", inputValue)}/>
+						</div>
 						<Textarea
-							rows={inputValue?.split("\n").length}
+							rows={minimizer(inputValue)?.split("\n").length}
 							readOnly
 							className="mt-1 font-mono cursor-pointer"
-							value={inputValue}
+							value={minimizer(inputValue)}
 							onClick={() =>
 								navigator.clipboard.writeText(inputValue)
 							}
 						/>
 					</div>
-					<div className="w-5/12">
-						<Label>Output</Label>
+					<div className="w-1/2">
+					<div className="flex justify-between">
+							<Label>Output</Label>
+							<DownloadMiniButton onClick={() => downloadTextfile("output.txt", outputValue)}/>
+						</div>
 						<Textarea
-							rows={outputValue?.split("\n").length}
+							rows={minimizer(outputValue)?.split("\n").length}
 							readOnly
 							className="mt-1 font-mono cursor-pointer"
-							value={outputValue ?? ""}
+							value={minimizer(outputValue)}
 							onClick={() =>
 								navigator.clipboard.writeText(outputValue ?? "")
 							}
 						/>
+
 					</div>
-					<div className="w-2/12">
+					{/* <div className="w-2/12">
 						<Label>Runtime Status</Label>
 						<p
 							className={`text-xl font-bold text-${
@@ -80,7 +118,7 @@ const TestcaseValidationInstance = ({
 						>
 							{status}
 						</p>
-					</div>
+					</div> */}
 				</div>
 			</AccordionContent>
 		</AccordionItem>

src/components/shadcn/Pagination.tsx

@@ -0,0 +1,117 @@
+import * as React from "react"
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+import { ButtonProps, buttonVariants } from "./Button"
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+)
+Pagination.displayName = "Pagination"
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...props}
+  />
+))
+PaginationContent.displayName = "PaginationContent"
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+))
+PaginationItem.displayName = "PaginationItem"
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<"a">
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className
+    )}
+    {...props}
+  />
+)
+PaginationLink.displayName = "PaginationLink"
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn("gap-1 pl-2.5", className)}
+    {...props}
+  >
+    <ChevronLeft className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+)
+PaginationPrevious.displayName = "PaginationPrevious"
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn("gap-1 pr-2.5", className)}
+    {...props}
+  >
+    <span>Next</span>
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+)
+PaginationNext.displayName = "PaginationNext"
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+)
+PaginationEllipsis.displayName = "PaginationEllipsis"
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+}