From 8356b758438c5c4c73a687e48464a72b19340b7d Mon Sep 17 00:00:00 2001 From: karivakrey Date: Sun, 25 Aug 2024 20:48:15 +0530 Subject: [PATCH 1/5] add(leaderboard):added leaderboard page --- frontend/src/App.tsx | 5 ++ .../components/card/assets/svg/circles.svg | 5 ++ .../leaderboard/components/card/index.tsx | 10 +++ .../components/top/assets/svg/first.svg | 11 +++ .../top/assets/svg/profile-temp.svg | 51 ++++++++++++ .../components/top/assets/svg/second.svg | 5 ++ .../components/top/assets/svg/third.svg | 5 ++ .../leaderboard/components/top/index.tsx | 47 +++++++++++ frontend/src/pages/leaderboard/index.tsx | 78 +++++++++++++++++-- package-lock.json | 6 ++ test.html | 77 ++++++++++++++++++ 11 files changed, 295 insertions(+), 5 deletions(-) create mode 100644 frontend/src/pages/leaderboard/components/card/assets/svg/circles.svg create mode 100644 frontend/src/pages/leaderboard/components/card/index.tsx create mode 100644 frontend/src/pages/leaderboard/components/top/assets/svg/first.svg create mode 100644 frontend/src/pages/leaderboard/components/top/assets/svg/profile-temp.svg create mode 100644 frontend/src/pages/leaderboard/components/top/assets/svg/second.svg create mode 100644 frontend/src/pages/leaderboard/components/top/assets/svg/third.svg create mode 100644 frontend/src/pages/leaderboard/components/top/index.tsx create mode 100644 package-lock.json create mode 100644 test.html diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 7f0c45b..d1e1367 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -11,6 +11,7 @@ import DashboardLayout from "@layouts/dashboardLayout"; import Main from "@pages/main"; import Profile from "@pages/profile"; import AddProjects from "./pages/addProjects"; +import Leaderboard from "./pages/leaderboard"; function App() { const router = createBrowserRouter([ @@ -54,6 +55,10 @@ function App() { }, ], }, + { + path: "/leaderboard", + element: , + }, ]); return ( diff --git a/frontend/src/pages/leaderboard/components/card/assets/svg/circles.svg b/frontend/src/pages/leaderboard/components/card/assets/svg/circles.svg new file mode 100644 index 0000000..9404c4c --- /dev/null +++ b/frontend/src/pages/leaderboard/components/card/assets/svg/circles.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/src/pages/leaderboard/components/card/index.tsx b/frontend/src/pages/leaderboard/components/card/index.tsx new file mode 100644 index 0000000..1c41643 --- /dev/null +++ b/frontend/src/pages/leaderboard/components/card/index.tsx @@ -0,0 +1,10 @@ +const Card = () => { + return ( +
+
#4
+ You are doing better than 69% of the members! +
+ ); +}; + +export default Card; diff --git a/frontend/src/pages/leaderboard/components/top/assets/svg/first.svg b/frontend/src/pages/leaderboard/components/top/assets/svg/first.svg new file mode 100644 index 0000000..fe4b500 --- /dev/null +++ b/frontend/src/pages/leaderboard/components/top/assets/svg/first.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/frontend/src/pages/leaderboard/components/top/assets/svg/profile-temp.svg b/frontend/src/pages/leaderboard/components/top/assets/svg/profile-temp.svg new file mode 100644 index 0000000..9bcc2f3 --- /dev/null +++ b/frontend/src/pages/leaderboard/components/top/assets/svg/profile-temp.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/pages/leaderboard/components/top/assets/svg/second.svg b/frontend/src/pages/leaderboard/components/top/assets/svg/second.svg new file mode 100644 index 0000000..66de2e6 --- /dev/null +++ b/frontend/src/pages/leaderboard/components/top/assets/svg/second.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/src/pages/leaderboard/components/top/assets/svg/third.svg b/frontend/src/pages/leaderboard/components/top/assets/svg/third.svg new file mode 100644 index 0000000..3d7886a --- /dev/null +++ b/frontend/src/pages/leaderboard/components/top/assets/svg/third.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/src/pages/leaderboard/components/top/index.tsx b/frontend/src/pages/leaderboard/components/top/index.tsx new file mode 100644 index 0000000..831c42b --- /dev/null +++ b/frontend/src/pages/leaderboard/components/top/index.tsx @@ -0,0 +1,47 @@ +import React from "react"; + +import first from "./assets/svg/first.svg"; +import second from "./assets/svg/second.svg"; +import third from "./assets/svg/third.svg"; +import profile from "./assets/svg/profile-temp.svg"; + +interface Item { + name: string; + upvote: number; + image: string; + rank: number; +} + +interface TopProps { + items: Item[]; +} + +const Podium: React.FC = ({ items }) => { + // Sort items by rank (ascending) + const sortedItems = [...items].sort((a, b) => a.rank - b.rank); + + return ( +
+
+ +
{sortedItems[1].name}
+

{sortedItems[1].upvote}

+ +
+
+ +
{sortedItems[0].name}
+

{sortedItems[0].upvote}

+ +
+
+ +
{sortedItems[2].name}
+

{sortedItems[2].upvote}

+ +
+
+ ); +}; + +export default Podium; diff --git a/frontend/src/pages/leaderboard/index.tsx b/frontend/src/pages/leaderboard/index.tsx index 7ce9787..0e6c58e 100644 --- a/frontend/src/pages/leaderboard/index.tsx +++ b/frontend/src/pages/leaderboard/index.tsx @@ -1,9 +1,77 @@ +import React, { useState } from "react"; +import { IoMdArrowRoundBack } from "react-icons/io"; +import Card from "./components/card"; +import Top from "./components/top"; -const Leaderboard = () => { - return ( -
Leaderboard
- ) +type TimeRange = "All Time" | "monthly"; + +interface Item { + name: string; + upvote: number; + image: string; + rank: number; } -export default Leaderboard \ No newline at end of file +const Leaderboard: React.FC = () => { + const [timeRange, setTimeRange] = useState("monthly"); + const items: Item[] = [ + { + name: "Awesome product!", + upvote: 123, + image: "https://via.placeholder.com/100", + rank: 1, + }, + { + name: "AMAZING THINGS!", + upvote: 456, + image: "https://via.placeholder.com/100", + rank: 2, + }, + { + name: "NOT THE BEST THOUGH", + upvote: 789, + image: "https://via.placeholder.com/100", + rank: 3, + }, + ]; + // Function to get the button classes based on the active timeRange + const buttonClasses = (type: TimeRange) => + `rounded-md cursor-pointer px-8 py-2 rounded-2xl ${ + timeRange === type + ? "bg-[#9087E5] text-white" + : "transparent text-gray-300" + }`; + + return ( +
+
+ + Leaderboard +
+
+ setTimeRange("monthly")} + > + Monthly + + setTimeRange("All Time")} + > + All Time + +
+
+ +
+
+ +
+
list
+
+ ); +}; + +export default Leaderboard; diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..52e6ce2 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "mu-store", + "lockfileVersion": 3, + "requires": true, + "packages": {} +} diff --git a/test.html b/test.html new file mode 100644 index 0000000..be57f32 --- /dev/null +++ b/test.html @@ -0,0 +1,77 @@ + + + + + + Orthographic Cube + + + +
+
+
+
+
+
+
+
+
+
+ + From 01d77cff716dafa701f38e3fe3c1d0c9af1c9a15 Mon Sep 17 00:00:00 2001 From: karivakrey Date: Mon, 26 Aug 2024 22:37:47 +0530 Subject: [PATCH 2/5] feat(leaderboard):finished leaderboard --- frontend/package-lock.json | 27 ++- frontend/src/App.css | 6 +- frontend/src/App.tsx | 7 +- frontend/src/app/(public)/index.ts | 7 +- .../src/app/(public)/leaderboard/index.ts | 1 + .../src/app/(public)/leaderboard/page.tsx | 2 + .../pages/leaderboard/assets/svg/circles.svg | 4 + .../components/card/assets/svg/circles.svg | 5 - .../leaderboard/components/card/index.tsx | 10 - .../components/contributers/index.tsx | 63 +++++ .../components/top/assets/svg/crown.svg | 11 + .../components/top/assets/svg/first.svg | 13 +- .../components/top/assets/svg/second.svg | 13 +- .../components/top/assets/svg/third.svg | 13 +- .../leaderboard/components/top/index.tsx | 77 ++++-- frontend/src/pages/leaderboard/index.tsx | 228 +++++++++++++++--- frontend/src/{ => types/general}/types.d.ts | 2 +- frontend/src/types/leaderboard/types.d.ts | 12 + run-frontend.sh | 2 + test.html | 77 ------ 20 files changed, 412 insertions(+), 168 deletions(-) create mode 100644 frontend/src/app/(public)/leaderboard/index.ts create mode 100644 frontend/src/app/(public)/leaderboard/page.tsx create mode 100644 frontend/src/pages/leaderboard/assets/svg/circles.svg delete mode 100644 frontend/src/pages/leaderboard/components/card/assets/svg/circles.svg delete mode 100644 frontend/src/pages/leaderboard/components/card/index.tsx create mode 100644 frontend/src/pages/leaderboard/components/contributers/index.tsx create mode 100644 frontend/src/pages/leaderboard/components/top/assets/svg/crown.svg rename frontend/src/{ => types/general}/types.d.ts (99%) create mode 100644 frontend/src/types/leaderboard/types.d.ts delete mode 100644 test.html diff --git a/frontend/package-lock.json b/frontend/package-lock.json index f24e53d..da21de3 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -13,6 +13,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-hook-form": "^7.52.2", + "react-hot-toast": "^2.4.1", "react-icons": "^5.3.0", "react-router-dom": "^6.26.1", "zod": "^3.23.8", @@ -2128,7 +2129,6 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "devOptional": true, "license": "MIT" }, "node_modules/debug": { @@ -2750,6 +2750,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/goober": { + "version": "2.1.14", + "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.14.tgz", + "integrity": "sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==", + "license": "MIT", + "peerDependencies": { + "csstype": "^3.0.10" + } + }, "node_modules/graphemer": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz", @@ -3625,6 +3634,22 @@ "react": "^16.8.0 || ^17 || ^18 || ^19" } }, + "node_modules/react-hot-toast": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz", + "integrity": "sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==", + "license": "MIT", + "dependencies": { + "goober": "^2.1.10" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": ">=16", + "react-dom": ">=16" + } + }, "node_modules/react-icons": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz", diff --git a/frontend/src/App.css b/frontend/src/App.css index 8c36d8a..842c0d3 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -3,6 +3,6 @@ @tailwind utilities; @font-face { - font-family: 'jakarta-sans'; - src: url('/fonts/PlusJakartaSans-VariableFont_wght.ttf'); -} \ No newline at end of file + font-family: "jakarta-sans"; + src: url("/fonts/PlusJakartaSans-VariableFont_wght.ttf"); +} diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index f88d287..3ed1f23 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -8,7 +8,12 @@ import NotFound from "@pages/notFound"; import DashboardLayout from "@layouts/dashboardLayout"; import { AuthLayout, Signin } from "@/app/auth"; import { DashboardProfile } from "@/app/dashboard"; -import { PublicHome, PublicLayout, AddProjects } from "@/app/(public)"; +import { + PublicHome, + PublicLayout, + AddProjects, + Leaderboard, +} from "@/app/(public)"; import { Toaster } from "react-hot-toast"; function App() { diff --git a/frontend/src/app/(public)/index.ts b/frontend/src/app/(public)/index.ts index fc1a485..bfb6b9b 100644 --- a/frontend/src/app/(public)/index.ts +++ b/frontend/src/app/(public)/index.ts @@ -1,3 +1,4 @@ -export * from './layout' -export * from './page' -export * from './project' \ No newline at end of file +export * from "./layout"; +export * from "./page"; +export * from "./project"; +export * from "./leaderboard"; diff --git a/frontend/src/app/(public)/leaderboard/index.ts b/frontend/src/app/(public)/leaderboard/index.ts new file mode 100644 index 0000000..4962a1f --- /dev/null +++ b/frontend/src/app/(public)/leaderboard/index.ts @@ -0,0 +1 @@ +export * from "./page"; diff --git a/frontend/src/app/(public)/leaderboard/page.tsx b/frontend/src/app/(public)/leaderboard/page.tsx new file mode 100644 index 0000000..66fc26e --- /dev/null +++ b/frontend/src/app/(public)/leaderboard/page.tsx @@ -0,0 +1,2 @@ +import * as Page from "@/pages/leaderboard"; +export const Leaderboard = () => ; diff --git a/frontend/src/pages/leaderboard/assets/svg/circles.svg b/frontend/src/pages/leaderboard/assets/svg/circles.svg new file mode 100644 index 0000000..73ea1ed --- /dev/null +++ b/frontend/src/pages/leaderboard/assets/svg/circles.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/src/pages/leaderboard/components/card/assets/svg/circles.svg b/frontend/src/pages/leaderboard/components/card/assets/svg/circles.svg deleted file mode 100644 index 9404c4c..0000000 --- a/frontend/src/pages/leaderboard/components/card/assets/svg/circles.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/frontend/src/pages/leaderboard/components/card/index.tsx b/frontend/src/pages/leaderboard/components/card/index.tsx deleted file mode 100644 index 1c41643..0000000 --- a/frontend/src/pages/leaderboard/components/card/index.tsx +++ /dev/null @@ -1,10 +0,0 @@ -const Card = () => { - return ( -
-
#4
- You are doing better than 69% of the members! -
- ); -}; - -export default Card; diff --git a/frontend/src/pages/leaderboard/components/contributers/index.tsx b/frontend/src/pages/leaderboard/components/contributers/index.tsx new file mode 100644 index 0000000..df6cb01 --- /dev/null +++ b/frontend/src/pages/leaderboard/components/contributers/index.tsx @@ -0,0 +1,63 @@ +import { FaPlus } from "react-icons/fa6"; + +type Props = { + contributers: { + muid: string; + image: string; + }[]; +}; + +export const Contributers = ({ contributers }: Props) => { + return ( +
4 + ? `translateX(${contributers.length + 10}px)` + : ``, + }} + > +
+ +
+ {contributers[1]?.muid && ( +
+ +
+ )} + {contributers[2]?.muid && ( +
+ +
+ )} + {contributers[3]?.muid && + (contributers.length !== 4 ? ( +
+ + {contributers.length - 3} +
+ ) : ( +
+ +
+ ))} +
+ ); +}; diff --git a/frontend/src/pages/leaderboard/components/top/assets/svg/crown.svg b/frontend/src/pages/leaderboard/components/top/assets/svg/crown.svg new file mode 100644 index 0000000..cccf240 --- /dev/null +++ b/frontend/src/pages/leaderboard/components/top/assets/svg/crown.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/frontend/src/pages/leaderboard/components/top/assets/svg/first.svg b/frontend/src/pages/leaderboard/components/top/assets/svg/first.svg index fe4b500..41ac62e 100644 --- a/frontend/src/pages/leaderboard/components/top/assets/svg/first.svg +++ b/frontend/src/pages/leaderboard/components/top/assets/svg/first.svg @@ -1,11 +1,10 @@ - - - - + + + - - - + + + diff --git a/frontend/src/pages/leaderboard/components/top/assets/svg/second.svg b/frontend/src/pages/leaderboard/components/top/assets/svg/second.svg index 66de2e6..5992296 100644 --- a/frontend/src/pages/leaderboard/components/top/assets/svg/second.svg +++ b/frontend/src/pages/leaderboard/components/top/assets/svg/second.svg @@ -1,5 +1,10 @@ - - - - + + + + + + + + + diff --git a/frontend/src/pages/leaderboard/components/top/assets/svg/third.svg b/frontend/src/pages/leaderboard/components/top/assets/svg/third.svg index 3d7886a..78e9f09 100644 --- a/frontend/src/pages/leaderboard/components/top/assets/svg/third.svg +++ b/frontend/src/pages/leaderboard/components/top/assets/svg/third.svg @@ -1,5 +1,10 @@ - - - - + + + + + + + + + diff --git a/frontend/src/pages/leaderboard/components/top/index.tsx b/frontend/src/pages/leaderboard/components/top/index.tsx index 831c42b..539b75f 100644 --- a/frontend/src/pages/leaderboard/components/top/index.tsx +++ b/frontend/src/pages/leaderboard/components/top/index.tsx @@ -4,12 +4,13 @@ import first from "./assets/svg/first.svg"; import second from "./assets/svg/second.svg"; import third from "./assets/svg/third.svg"; import profile from "./assets/svg/profile-temp.svg"; - +import crown from "./assets/svg/crown.svg"; interface Item { name: string; upvote: number; image: string; rank: number; + description: string; } interface TopProps { @@ -21,24 +22,62 @@ const Podium: React.FC = ({ items }) => { const sortedItems = [...items].sort((a, b) => a.rank - b.rank); return ( -
-
- -
{sortedItems[1].name}
-

{sortedItems[1].upvote}

- -
-
- -
{sortedItems[0].name}
-

{sortedItems[0].upvote}

- -
-
- -
{sortedItems[2].name}
-

{sortedItems[2].upvote}

- +
+
+
+ +
+ {sortedItems[1].name} +
+

+ {sortedItems[1].upvote} +

+ +
+ +
+ 2 +
+
+
+ +
+
+ + +
+
+ {sortedItems[0].name} +
+

+ {sortedItems[0].upvote} +

+
+ +
+ 1 +
+
+
+ +
+ +
+ {sortedItems[2].name} +
+

+ {sortedItems[2].upvote} +

+
+ +
+ 3 +
+
+
); diff --git a/frontend/src/pages/leaderboard/index.tsx b/frontend/src/pages/leaderboard/index.tsx index 0e6c58e..6181f21 100644 --- a/frontend/src/pages/leaderboard/index.tsx +++ b/frontend/src/pages/leaderboard/index.tsx @@ -1,77 +1,239 @@ import React, { useState } from "react"; import { IoMdArrowRoundBack } from "react-icons/io"; -import Card from "./components/card"; - +import { Contributers } from "./components/contributers"; import Top from "./components/top"; -type TimeRange = "All Time" | "monthly"; - -interface Item { - name: string; - upvote: number; - image: string; - rank: number; -} +import circle from "./assets/svg/circles.svg"; +import profileAvatar from "./components/top/assets/svg/profile-temp.svg"; -const Leaderboard: React.FC = () => { - const [timeRange, setTimeRange] = useState("monthly"); +export const Leaderboard: React.FC = () => { + const [timeRange, setTimeRange] = useState(0); const items: Item[] = [ { name: "Awesome product!", upvote: 123, image: "https://via.placeholder.com/100", rank: 1, + description: "This is a description", + owner: "Budhiman123", + contributers: [ + { + muid: "geevarghese@mulearn", + image: + "https://mulearn.org/muback-media/user/profile/8bafab61-8f13-4c67-9509-52f472a16a4b.png?468.3652169774042", + }, + ], }, { name: "AMAZING THINGS!", upvote: 456, image: "https://via.placeholder.com/100", rank: 2, + description: "This is a description", + owner: "Budhiman123", + contributers: [ + { + muid: "geevarghese@mulearn", + image: + "https://mulearn.org/muback-media/user/profile/8bafab61-8f13-4c67-9509-52f472a16a4b.png?468.3652169774042", + }, + { + muid: "geevarghese@mulearn", + image: + "https://mulearn.org/muback-media/user/profile/8bafab61-8f13-4c67-9509-52f472a16a4b.png?468.3652169774042", + }, + { + muid: "geevarghese@mulearn", + image: + "https://mulearn.org/muback-media/user/profile/8bafab61-8f13-4c67-9509-52f472a16a4b.png?468.3652169774042", + }, + ], }, { name: "NOT THE BEST THOUGH", upvote: 789, image: "https://via.placeholder.com/100", rank: 3, + description: "This is a description", + owner: "Budhiman123", + contributers: [ + { + muid: "geevarghese@mulearn", + image: + "https://mulearn.org/muback-media/user/profile/8bafab61-8f13-4c67-9509-52f472a16a4b.png?468.3652169774042", + }, + { + muid: "geevarghese@mulearn", + image: + "https://mulearn.org/muback-media/user/profile/8bafab61-8f13-4c67-9509-52f472a16a4b.png?468.3652169774042", + }, + ], + }, + //create 3 more such items + { + name: "GREAT STUFF", + upvote: 987, + image: "https://via.placeholder.com/100", + rank: 4, + description: "This is a description", + owner: "Budhiman123", + contributers: [ + { + muid: "geevarghese@mulearn", + image: + "https://mulearn.org/muback-media/user/profile/8bafab61-8f13-4c67-9509-52f472a16a4b.png?468.3652169774042", + }, + { + muid: "geevarghese@mulearn", + image: + "https://mulearn.org/muback-media/user/profile/8bafab61-8f13-4c67-9509-52f472a16a4b.png?468.3652169774042", + }, + { + muid: "geevarghese@mulearn", + image: + "https://mulearn.org/muback-media/user/profile/8bafab61-8f13-4c67-9509-52f472a16a4b.png?468.3652169774042", + }, + { + muid: "geevarghese@mulearn", + image: + "https://mulearn.org/muback-media/user/profile/8bafab61-8f13-4c67-9509-52f472a16a4b.png?468.3652169774042", + }, + ], + }, + { + name: "AWESOME PRODUCT", + upvote: 654, + image: "https://via.placeholder.com/100", + rank: 5, + description: "This is a description", + owner: "Budhiman123", + contributers: [ + { + muid: "geevarghese@mulearn", + image: + "https://mulearn.org/muback-media/user/profile/8bafab61-8f13-4c67-9509-52f472a16a4b.png?468.3652169774042", + }, + { + muid: "geevarghese@mulearn", + image: + "https://mulearn.org/muback-media/user/profile/8bafab61-8f13-4c67-9509-52f472a16a4b.png?468.3652169774042", + }, + { + muid: "geevarghese@mulearn", + image: + "https://mulearn.org/muback-media/user/profile/8bafab61-8f13-4c67-9509-52f472a16a4b.png?468.3652169774042", + }, + { + muid: "geevarghese@mulearn", + image: + "https://mulearn.org/muback-media/user/profile/8bafab61-8f13-4c67-9509-52f472a16a4b.png?468.3652169774042", + }, + { + muid: "geevarghese@mulearn", + image: + "https://mulearn.org/muback-media/user/profile/8bafab61-8f13-4c67-9509-52f472a16a4b.png?468.3652169774042", + }, + { + muid: "geevarghese@mulearn", + image: + "https://mulearn.org/muback-media/user/profile/8bafab61-8f13-4c67-9509-52f472a16a4b.png?468.3652169774042", + }, + ], + }, + { + name: "COOL THINGS", + upvote: 321, + image: "https://via.placeholder.com/100", + rank: 6, + description: "This is a description", + owner: "Budhiman123", + contributers: [ + { + muid: "geevarghese@mulearn", + image: + "https://mulearn.org/muback-media/user/profile/8bafab61-8f13-4c67-9509-52f472a16a4b.png?468.3652169774042", + }, + ], }, ]; + const sortedItems = [...items].sort((a, b) => a.rank - b.rank); // Function to get the button classes based on the active timeRange - const buttonClasses = (type: TimeRange) => - `rounded-md cursor-pointer px-8 py-2 rounded-2xl ${ + const buttonClasses = (type: number) => + `rounded-md cursor-pointer px-8 py-2 rounded-2xl ${ timeRange === type ? "bg-[#9087E5] text-white" - : "transparent text-gray-300" + : "transparent text-gray-300 " }`; return ( -
-
+
+
+
Leaderboard
-
- setTimeRange("monthly")} - > + +
+ setTimeRange(0)}> Monthly - setTimeRange("All Time")} - > + setTimeRange(1)}> All Time
-
- +
+
+
+ circle +
+ +
+
-
- + +
+
+
+
+
Rank
+
Product
+
+
+
Collaborators
+
UpVotes
+
+
+ {sortedItems.map((item, index) => ( +
+
+ {item.rank} +
+ Profile +
+ {item.name} +
+
+
+ +
+ +

{item.upvote}

+
+
+ ))} +
-
list
); }; - -export default Leaderboard; diff --git a/frontend/src/types.d.ts b/frontend/src/types/general/types.d.ts similarity index 99% rename from frontend/src/types.d.ts rename to frontend/src/types/general/types.d.ts index 6b08614..34334e7 100644 --- a/frontend/src/types.d.ts +++ b/frontend/src/types/general/types.d.ts @@ -11,4 +11,4 @@ interface AxiosResponseData { response: { accessToken: string; }; -} \ No newline at end of file +} diff --git a/frontend/src/types/leaderboard/types.d.ts b/frontend/src/types/leaderboard/types.d.ts new file mode 100644 index 0000000..1917337 --- /dev/null +++ b/frontend/src/types/leaderboard/types.d.ts @@ -0,0 +1,12 @@ +interface Item { + name: string; + upvote: number; + image: string; + rank: number; + description: string; + owner: string; + contributers: string[{ + muid: string; + image: string; + }]; +} diff --git a/run-frontend.sh b/run-frontend.sh index 86c6c47..d82a8d2 100644 --- a/run-frontend.sh +++ b/run-frontend.sh @@ -18,6 +18,8 @@ elif [ "$install_choice" = "preview" ]; then npm run preview elif [ "$install_choice" = "install" ]; then npm install +elif [ "$install_choice" = "i" ]; then + npm install elif [ "$install_choice" = "dev host" ]; then npm run dev -- --host fi diff --git a/test.html b/test.html deleted file mode 100644 index be57f32..0000000 --- a/test.html +++ /dev/null @@ -1,77 +0,0 @@ - - - - - - Orthographic Cube - - - -
-
-
-
-
-
-
-
-
-
- - From 10269b1ef91b33c907730498f8f4c8444ccbc681 Mon Sep 17 00:00:00 2001 From: karivakrey Date: Wed, 28 Aug 2024 09:59:45 +0530 Subject: [PATCH 3/5] add(productDetails):Added product details page --- frontend/src/App.tsx | 6 ++ .../components/imageGrid/imageGrid.tsx | 7 +++ frontend/src/pages/productDetails/index.tsx | 57 +++++++++++++++++-- 3 files changed, 66 insertions(+), 4 deletions(-) create mode 100644 frontend/src/pages/productDetails/components/imageGrid/imageGrid.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 3ed1f23..3ef32a5 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -16,6 +16,8 @@ import { } from "@/app/(public)"; import { Toaster } from "react-hot-toast"; +import ProductDetails from "./pages/productDetails"; + function App() { const router = createBrowserRouter([ { @@ -68,6 +70,10 @@ function App() { path: "/leaderboard", element: , }, + { + path: "/product/", + element: , + }, ]); return ( diff --git a/frontend/src/pages/productDetails/components/imageGrid/imageGrid.tsx b/frontend/src/pages/productDetails/components/imageGrid/imageGrid.tsx new file mode 100644 index 0000000..53a4bc0 --- /dev/null +++ b/frontend/src/pages/productDetails/components/imageGrid/imageGrid.tsx @@ -0,0 +1,7 @@ +type Props = {}; + +const imageGrid = (props: Props) => { + return
imageGrid
; +}; + +export default imageGrid; diff --git a/frontend/src/pages/productDetails/index.tsx b/frontend/src/pages/productDetails/index.tsx index f8ea8df..115817e 100644 --- a/frontend/src/pages/productDetails/index.tsx +++ b/frontend/src/pages/productDetails/index.tsx @@ -1,8 +1,57 @@ +import Navbar from "@/components/navbar"; +import { BsDot, BsFillFlagFill } from "react-icons/bs"; +import { FiHeart } from "react-icons/fi"; +import { PiArrowFatUpLight } from "react-icons/pi"; +import { RiShareFill } from "react-icons/ri"; const ProductDetails = () => { return ( -
ProductDetails
- ) -} +
+ -export default ProductDetails \ No newline at end of file +
+
+
+

+ Pixelated butterfly +

+

+ Project that is pixelated +

+ + #tags + +
+
+
+
+

+ +

+

Upvote

+
+ + +

269

+
+ +
+
+
+ +
+
+ +
+
+ +
+
+
+
IMAGE GRID
+
+
+ ); +}; + +export default ProductDetails; From 5fe6fa96270b5448c5c2ea9c844060a7b84b5a41 Mon Sep 17 00:00:00 2001 From: karivakrey Date: Thu, 29 Aug 2024 07:51:36 +0530 Subject: [PATCH 4/5] add(productDetails): Added contributers component --- frontend/package-lock.json | 76 +++++++++++++ frontend/package.json | 1 + .../images/poductDetails/contributers.svg | 101 ++++++++++++++++++ .../components/credits/credits.tsx | 82 ++++++++++++++ .../components/imageGrid/imageGrid.tsx | 7 -- frontend/src/pages/productDetails/index.tsx | 43 +++++++- 6 files changed, 302 insertions(+), 8 deletions(-) create mode 100644 frontend/public/images/poductDetails/contributers.svg create mode 100644 frontend/src/pages/productDetails/components/credits/credits.tsx delete mode 100644 frontend/src/pages/productDetails/components/imageGrid/imageGrid.tsx diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 2bb36f8..ed8b97d 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -15,6 +15,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-draft-wysiwyg": "^1.15.0", + "react-grid-layout": "^1.4.4", "react-hook-form": "^7.52.2", "react-hot-toast": "^2.4.1", "react-icons": "^5.3.0", @@ -2033,6 +2034,15 @@ "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" }, + "node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", @@ -2563,6 +2573,12 @@ "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", "dev": true }, + "node_modules/fast-equals": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-4.0.3.tgz", + "integrity": "sha512-G3BSX9cfKttjr+2o1O22tYMLq0DPluZnYtq1rXumE1SpL/F/SLIfHx08WYQoWSIpeMYf8sRbJ8++71+v6Pnxfg==", + "license": "MIT" + }, "node_modules/fast-glob": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz", @@ -3825,6 +3841,47 @@ "react-dom": "0.13.x || 0.14.x || ^15.0.0-0 || 15.x.x || ^16.0.0-0 || ^16.x.x || ^17.x.x || ^18.x.x" } }, + "node_modules/react-draggable": { + "version": "4.4.6", + "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.6.tgz", + "integrity": "sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==", + "license": "MIT", + "dependencies": { + "clsx": "^1.1.1", + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "react": ">= 16.3.0", + "react-dom": ">= 16.3.0" + } + }, + "node_modules/react-draggable/node_modules/clsx": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/react-grid-layout": { + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/react-grid-layout/-/react-grid-layout-1.4.4.tgz", + "integrity": "sha512-7+Lg8E8O8HfOH5FrY80GCIR1SHTn2QnAYKh27/5spoz+OHhMmEhU/14gIkRzJOtympDPaXcVRX/nT1FjmeOUmQ==", + "license": "MIT", + "dependencies": { + "clsx": "^2.0.0", + "fast-equals": "^4.0.3", + "prop-types": "^15.8.1", + "react-draggable": "^4.4.5", + "react-resizable": "^3.0.5", + "resize-observer-polyfill": "^1.5.1" + }, + "peerDependencies": { + "react": ">= 16.3.0", + "react-dom": ">= 16.3.0" + } + }, "node_modules/react-hook-form": { "version": "7.53.0", "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.53.0.tgz", @@ -3877,6 +3934,19 @@ "node": ">=0.10.0" } }, + "node_modules/react-resizable": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/react-resizable/-/react-resizable-3.0.5.tgz", + "integrity": "sha512-vKpeHhI5OZvYn82kXOs1bC8aOXktGU5AmKAgaZS4F5JPburCtbmDPqE7Pzp+1kN4+Wb81LlF33VpGwWwtXem+w==", + "license": "MIT", + "dependencies": { + "prop-types": "15.x", + "react-draggable": "^4.0.3" + }, + "peerDependencies": { + "react": ">= 16.3" + } + }, "node_modules/react-router": { "version": "6.26.1", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.1.tgz", @@ -3968,6 +4038,12 @@ "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==" }, + "node_modules/resize-observer-polyfill": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", + "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==", + "license": "MIT" + }, "node_modules/resolve": { "version": "1.22.8", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", diff --git a/frontend/package.json b/frontend/package.json index 75ed0c3..a97a200 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -17,6 +17,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-draft-wysiwyg": "^1.15.0", + "react-grid-layout": "^1.4.4", "react-hook-form": "^7.52.2", "react-hot-toast": "^2.4.1", "react-icons": "^5.3.0", diff --git a/frontend/public/images/poductDetails/contributers.svg b/frontend/public/images/poductDetails/contributers.svg new file mode 100644 index 0000000..5020c89 --- /dev/null +++ b/frontend/public/images/poductDetails/contributers.svg @@ -0,0 +1,101 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/pages/productDetails/components/credits/credits.tsx b/frontend/src/pages/productDetails/components/credits/credits.tsx new file mode 100644 index 0000000..5873492 --- /dev/null +++ b/frontend/src/pages/productDetails/components/credits/credits.tsx @@ -0,0 +1,82 @@ +import { FaPlus } from "react-icons/fa6"; +import contributersBackground from "./../../../../../public/images/poductDetails/contributers.svg"; + +type Props = { + contributers: { + muid: string; + image: string; + }[]; +}; + +export const Credits = ({ contributers }: Props) => { + return ( +
+
+
+

+ We Owe this +

{" "} + project to all those who contributed +
+
4 + ? `translateX(${contributers.length + 10}px)` + : ``, + }} + > +
+ +
+ {contributers[1]?.muid && ( +
+ +
+ )} + {contributers[2]?.muid && ( +
+ +
+ )} + {contributers[3]?.muid && + (contributers.length !== 4 ? ( +
+ + {contributers.length - 3} +
+ ) : ( +
+ +
+ ))} +
+
+
+ ); +}; diff --git a/frontend/src/pages/productDetails/components/imageGrid/imageGrid.tsx b/frontend/src/pages/productDetails/components/imageGrid/imageGrid.tsx deleted file mode 100644 index 53a4bc0..0000000 --- a/frontend/src/pages/productDetails/components/imageGrid/imageGrid.tsx +++ /dev/null @@ -1,7 +0,0 @@ -type Props = {}; - -const imageGrid = (props: Props) => { - return
imageGrid
; -}; - -export default imageGrid; diff --git a/frontend/src/pages/productDetails/index.tsx b/frontend/src/pages/productDetails/index.tsx index 115817e..d15271a 100644 --- a/frontend/src/pages/productDetails/index.tsx +++ b/frontend/src/pages/productDetails/index.tsx @@ -3,8 +3,41 @@ import { BsDot, BsFillFlagFill } from "react-icons/bs"; import { FiHeart } from "react-icons/fi"; import { PiArrowFatUpLight } from "react-icons/pi"; import { RiShareFill } from "react-icons/ri"; +import { Credits } from "./components/credits/credits"; const ProductDetails = () => { + const contributers = [ + { + muid: "geevarghese@mulearn", + image: + "https://mulearn.org/muback-media/user/profile/8bafab61-8f13-4c67-9509-52f472a16a4b.png?468.3652169774042", + }, + { + muid: "geevarghese@mulearn", + image: + "https://mulearn.org/muback-media/user/profile/8bafab61-8f13-4c67-9509-52f472a16a4b.png?468.3652169774042", + }, + { + muid: "geevarghese@mulearn", + image: + "https://mulearn.org/muback-media/user/profile/8bafab61-8f13-4c67-9509-52f472a16a4b.png?468.3652169774042", + }, + { + muid: "geevarghese@mulearn", + image: + "https://mulearn.org/muback-media/user/profile/8bafab61-8f13-4c67-9509-52f472a16a4b.png?468.3652169774042", + }, + { + muid: "geevarghese@mulearn", + image: + "https://mulearn.org/muback-media/user/profile/8bafab61-8f13-4c67-9509-52f472a16a4b.png?468.3652169774042", + }, + { + muid: "geevarghese@mulearn", + image: + "https://mulearn.org/muback-media/user/profile/8bafab61-8f13-4c67-9509-52f472a16a4b.png?468.3652169774042", + }, + ]; return (
@@ -48,7 +81,15 @@ const ProductDetails = () => {
-
IMAGE GRID
+
+ IMAGE GRID AND DESCROPTION +
+
+
Comments
+
+ +
+
); From dc77dc0cbd6fc7c1355ea40b56f4cf9671ee8bfd Mon Sep 17 00:00:00 2001 From: karivakrey Date: Sun, 1 Sep 2024 09:54:33 +0530 Subject: [PATCH 5/5] feat(product):Added disquss thread coponent --- frontend/package-lock.json | 11 ++++++++ frontend/package.json | 1 + frontend/src/pages/addProjects/index.tsx | 1 + frontend/src/pages/productDetails/index.tsx | 28 +++++++++++++++++---- 4 files changed, 36 insertions(+), 5 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index ed8b97d..132d4f3 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -11,6 +11,7 @@ "@hookform/resolvers": "^3.9.0", "@types/react-draft-wysiwyg": "^1.13.8", "axios": "^1.7.5", + "disqus-react": "^1.1.5", "framer-motion": "^11.3.29", "react": "^18.3.1", "react-dom": "^18.3.1", @@ -2198,6 +2199,16 @@ "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==", "dev": true }, + "node_modules/disqus-react": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/disqus-react/-/disqus-react-1.1.5.tgz", + "integrity": "sha512-9fdG5m6c3wJzlCDLaMheuUagMVj3s5qgUSXdekpCsvzYOKG21AiuOoqyDzA0oXrpPnYzgpnsvPYqZ+i0hJPGZw==", + "license": "MIT", + "peerDependencies": { + "react": "^15.6.1 || ^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^15.6.1 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/dlv": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz", diff --git a/frontend/package.json b/frontend/package.json index a97a200..68d21de 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -13,6 +13,7 @@ "@hookform/resolvers": "^3.9.0", "@types/react-draft-wysiwyg": "^1.13.8", "axios": "^1.7.5", + "disqus-react": "^1.1.5", "framer-motion": "^11.3.29", "react": "^18.3.1", "react-dom": "^18.3.1", diff --git a/frontend/src/pages/addProjects/index.tsx b/frontend/src/pages/addProjects/index.tsx index db52445..0dc09ff 100644 --- a/frontend/src/pages/addProjects/index.tsx +++ b/frontend/src/pages/addProjects/index.tsx @@ -26,6 +26,7 @@ export const AddProjects = () => { tagline: "", }, }); + console.log(setValue); const title = watch("title"); const tagline = watch("tagline"); diff --git a/frontend/src/pages/productDetails/index.tsx b/frontend/src/pages/productDetails/index.tsx index d15271a..ed23ac2 100644 --- a/frontend/src/pages/productDetails/index.tsx +++ b/frontend/src/pages/productDetails/index.tsx @@ -4,8 +4,16 @@ import { FiHeart } from "react-icons/fi"; import { PiArrowFatUpLight } from "react-icons/pi"; import { RiShareFill } from "react-icons/ri"; import { Credits } from "./components/credits/credits"; - +import { DiscussionEmbed } from "disqus-react"; const ProductDetails = () => { + const disqusConfig = { + shortname: "mustore", // Replace with your Disqus shortname + config: { + url: window.location.href, + identifier: "product-id", // Use a unique identifier for each product/page + title: "Pixelated butterfly", + }, + }; const contributers = [ { muid: "geevarghese@mulearn", @@ -84,10 +92,20 @@ const ProductDetails = () => {
IMAGE GRID AND DESCROPTION
-
-
Comments
-
- +
+
+
+
+
Comments
+ +
+ +
+
+
+
+ +