Skip to content

Commit 9d2d687

Browse files
Merge pull request #10 from abhitrueprogrammer/master
Added several UI fixes
2 parents 0cbca56 + cd11831 commit 9d2d687

File tree

10 files changed

+147
-47
lines changed

10 files changed

+147
-47
lines changed

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
"react-dom": "^18.3.0",
5252
"react-dropzone": "^14.2.3",
5353
"react-hot-toast": "^2.4.1",
54+
"react-icons": "^5.3.0",
5455
"tailwind-merge": "^2.5.3",
5556
"tailwindcss-animate": "^1.0.7",
5657
"use-debounce": "^10.0.3",

pnpm-lock.yaml

Lines changed: 21 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/app/adminupload/page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -402,7 +402,7 @@ function Upload() {
402402
}
403403

404404
if (!tag) {
405-
return <div>Loading...</div>;
405+
return <div>.</div>;
406406
}
407407

408408
return (

src/app/catalogue/page.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,17 @@
33
import CatalogueContent from "@/components/CatalogueContent";
44
import { Suspense } from "react";
55
import Navbar from "@/components/Navbar";
6-
6+
import { RiLoader2Fill } from "react-icons/ri";
7+
import Loader from "@/components/ui/loader";
78
const Catalogue = () => {
89
return (
910
<>
1011
<Navbar />
11-
<Suspense fallback={<div>Loading catalogue...</div>}>
12+
<Suspense
13+
fallback={
14+
<Loader />
15+
}
16+
>
1217
<CatalogueContent />
1318
</Suspense>
1419
</>

src/app/layout.tsx

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,33 @@ import "@/styles/globals.css";
22
import { Toaster } from "react-hot-toast";
33
import { ThemeProvider } from "@/components/theme-provider";
44
import { GeistSans } from "geist/font/sans";
5+
import { Metadata } from "next";
56

6-
export const metadata = {
7-
title: "Create T3 App",
8-
description: "Generated by create-t3-app",
9-
icons: [{ rel: "icon", url: "/favicon.ico" }],
7+
8+
export const metadata: Metadata = {
9+
metadataBase: new URL("https://papers.codechefvit.com/"),
10+
title: "Papers",
11+
description: "Made with ♡ by CodeChef-VIT",
12+
icons: [{ rel: "icon", url: "/chefshat.svg" }],
13+
openGraph: {
14+
title: "Papers",
15+
images: [{ url: "/cookoff.png" }],
16+
url: "https://papers.codechefvit.com/",
17+
type: "website",
18+
description: "Made with ♡ by CodeChef-VIT",
19+
siteName: "Papers",
20+
},
21+
applicationName: "Papers",
22+
keywords: [
23+
"CodeChef",
24+
"VIT",
25+
"Vellore Institute of Technology",
26+
"CodeChef-VIT",
27+
"Papers"
28+
],
1029
};
1130

31+
1232
export default function RootLayout({
1333
children,
1434
}: {

src/app/upload/page.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -87,8 +87,8 @@ const Page = () => {
8787
}
8888
})(),
8989
{
90-
loading: "Sending zip",
91-
success: "zip successfully sent",
90+
loading: "Sending papers",
91+
success: "Papers successfully sent",
9292
error: (err: ApiError) => err.message,
9393
},
9494
);
@@ -107,7 +107,7 @@ const Page = () => {
107107
<div>
108108
<Navbar />
109109
</div>
110-
<div className="2xl:my-12 flex flex-col items-center">
110+
<div className="2xl:my-15 flex flex-col items-center">
111111
<fieldset className="mb-4 w-[350px] rounded-lg border-2 border-gray-300 p-4 pr-8">
112112
<legend className="text-lg font-bold">Select paper parameters</legend>
113113

src/components/CatalogueContent.tsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import Card from "./Card";
99
import { extractBracketContent } from "@/util/utils";
1010
import { useRouter } from "next/navigation";
1111
import SearchBar from "./searchbar";
12+
import { RiLoader2Fill } from "react-icons/ri";
13+
import Loader from "./ui/loader";
1214

1315
const cryptr = new Cryptr(
1416
process.env.NEXT_PUBLIC_CRYPTO_SECRET ?? "default_crypto_secret",
@@ -168,7 +170,7 @@ const CatalogueContent = () => {
168170

169171
return (
170172
<div className="min-h-screen px-2 md:p-8">
171-
<div className="mb-4 flex flex-row w-full items-center md:justify-center md:gap-10">
173+
<div className="mb-4 flex w-full flex-row items-center md:justify-center md:gap-10">
172174
<div className="w-[120%] md:w-[576px]">
173175
<SearchBar />
174176
</div>
@@ -187,10 +189,11 @@ const CatalogueContent = () => {
187189

188190
{error && <p className="text-red-500">{error}</p>}
189191
{loading ? (
190-
<p>Loading papers...</p>
192+
<Loader />
193+
191194
) : papers.length > 0 ? (
192195
<>
193-
<div className="mb-4 2xl:mr-4 flex justify-center md:justify-end gap-2">
196+
<div className="mb-4 flex justify-center gap-2 md:justify-end 2xl:mr-4">
194197
<Button variant="outline" onClick={handleSelectAll}>
195198
Select All
196199
</Button>
@@ -205,7 +208,7 @@ const CatalogueContent = () => {
205208
Download All ({selectedPapers.length})
206209
</Button>
207210
</div>
208-
<div className="flex flex-col items-center justify-center md:justify-normal md:flex-row flex-wrap mx-auto gap-10">
211+
<div className="mx-auto flex flex-col flex-wrap items-center justify-center gap-10 md:flex-row md:justify-normal">
209212
{papers.map((paper) => (
210213
<Card
211214
key={paper._id}

src/components/Footer.tsx

Lines changed: 55 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,37 +6,78 @@ import meta_icon from "../assets/meta_icon.svg";
66
import x_twitter_icon from "../assets/x_twitter_icon.svg";
77
import meta_icon_dark from "../assets/meta_icon_dark.svg";
88
import x_twitter_icon_dark from "../assets/x_twitter_icon_dark.svg";
9+
import Link from "next/link";
910

1011
export default function Footer() {
1112
return (
12-
<div className="flex md:flex-row flex-col gap-y-12 md:w-full md:px-12 mx-auto items-center justify-between pt-12">
13+
<div className="mx-auto flex flex-col items-center justify-between gap-y-12 pt-12 lg:w-full lg:flex-row lg:px-12">
1314
<div className="flex items-center">
14-
<h1 className="jost bg-gradient-to-r from-[#562EE7] to-[#FFC6E8] bg-clip-text text-center text-3xl md:text-5xl font-bold text-transparent">
15+
<h1 className="jost bg-gradient-to-r from-[#562EE7] to-[#FFC6E8] bg-clip-text text-center text-3xl font-bold text-transparent lg:text-5xl">
1516
Papers
1617
</h1>
17-
<Separator orientation="vertical" className="min-h-20 h-full mx-3" />
18+
<Separator orientation="vertical" className="mx-3 h-full min-h-20" />
1819
<div className="flex items-center">
1920
<Image
2021
src={ccLogo as HTMLImageElement}
2122
alt="codechef-logo"
2223
height={70}
2324
width={70}
2425
/>
25-
<p className="jost text-2xl md:text-4xl font-bold">CodeChef-VIT</p>
26+
<p className="jost text-2xl font-bold lg:text-4xl">CodeChef-VIT</p>
2627
</div>
2728
</div>
2829

29-
<p className="text-xl md:block hidden">Made with Love By Codechef-VIT</p>
30-
<div className="flex gap-x-8 items-center">
31-
<Instagram />
32-
<Linkedin />
33-
<Youtube />
34-
<Image src={meta_icon} alt="meta-icon" height={24} width={24} className="dark:hidden"/>
35-
<Image src={x_twitter_icon} alt="x_twitter_icon" className="dark:hidden" height={24} width={24} />
36-
<Image src={meta_icon_dark} alt="meta-icon" className="hidden dark:block" height={24} width={24} />
37-
<Image src={x_twitter_icon_dark} alt="x_twitter_icon" className="hidden dark:block mb-2" height={24} width={24} />
30+
<p className="hidden text-xl lg:block">Made with Love By Codechef-VIT</p>
31+
<div className="flex items-center gap-x-8">
32+
<Link href="https://www.instagram.com/codechefvit/">
33+
<Instagram />
34+
</Link>
35+
<Link href="https://www.linkedin.com/company/codechefvit/">
36+
<Linkedin />
37+
</Link>
38+
<Link href="https://www.youtube.com/@CodeChefVIT">
39+
<Youtube />
40+
</Link>
41+
<Link href="https://www.facebook.com/codechefvit/">
42+
<Image
43+
src={meta_icon}
44+
alt="meta-icon"
45+
height={24}
46+
width={24}
47+
className="dark:hidden"
48+
/>
49+
</Link>
50+
51+
<Link href="https://www.facebook.com/codechefvit/">
52+
<Image
53+
src={meta_icon_dark}
54+
alt="meta-icon"
55+
className="hidden dark:block"
56+
height={24}
57+
width={24}
58+
/>
59+
</Link>
60+
<Link href="https://x.com/codechefvit">
61+
<Image
62+
src={x_twitter_icon}
63+
alt="x_twitter_icon"
64+
className="dark:hidden"
65+
height={24}
66+
width={24}
67+
/>
68+
</Link>
69+
70+
<Link href="https://x.com/codechefvit">
71+
<Image
72+
src={x_twitter_icon_dark}
73+
alt="x_twitter_icon"
74+
className="mb-2 hidden dark:block"
75+
height={24}
76+
width={24}
77+
/>
78+
</Link>
3879
</div>
39-
<p className="text-xl block md:hidden">Made with Love By Codechef-VIT</p>
80+
<p className="block text-xl lg:hidden">Made with Love By Codechef-VIT</p>
4081
</div>
4182
);
4283
}

src/components/Navbar.tsx

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,21 @@ import Link from "next/link";
88
function Navbar() {
99
return (
1010
<div className="flex items-center justify-between px-4 py-6 md:px-12">
11-
<div className="hidden w-[20%] md:block">
12-
<Image
13-
src={ccLogo as HTMLImageElement}
14-
alt="codechef-logo"
15-
height={70}
16-
width={70}
17-
/>
11+
<div className="hiddaen w-[20%] md:block">
12+
<a href="https://www.codechefvit.com/" className="inline-block">
13+
<Image
14+
src={ccLogo as HTMLImageElement}
15+
alt="codechef-logo"
16+
height={70}
17+
width={70}
18+
/>
19+
</a>
20+
</div>
21+
<div>
22+
<Link href="/" className="jost bg-gradient-to-r from-[#562EE7] to-[#FFC6E8] bg-clip-text text-center text-5xl font-bold text-transparent md:w-[60%] md:text-6xl">
23+
Papers
24+
</Link>
1825
</div>
19-
<Link href="/" className="jost bg-gradient-to-r from-[#562EE7] to-[#FFC6E8] bg-clip-text text-center text-5xl font-bold text-transparent md:w-[60%] md:text-6xl">
20-
Papers
21-
</Link>
2226
<div className="flex items-center justify-end gap-x-2 md:w-[20%]">
2327
<div className="hidden md:block">
2428
<ModeToggle />

src/components/ui/loader.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
const Loader = () => {
2+
return (
3+
<div className="m-52 flex justify-center items-center bg-gradient-to-br ">
4+
<div className="relative">
5+
<div className="absolute inset-0 rounded-full bg-gradient-to-r from-white to-transparent opacity-30 animate-ping"></div>
6+
<div className="animate-spin rounded-full h-20 w-20 border-t-4 border-b-4 border-transparent border-t-white border-b-gray-800 shadow-lg"></div>
7+
<div className="absolute inset-4 rounded-full bg-gradient-to-br from-[#262626] to-[#333333] shadow-inner"></div>
8+
<div className="absolute inset-7 rounded-full bg-white shadow-lg animate-pulse"></div>
9+
</div>
10+
</div>
11+
);
12+
};
13+
14+
export default Loader;

0 commit comments

Comments
 (0)