From f26a1b35030e97a52a220001eb78987e7c184814 Mon Sep 17 00:00:00 2001 From: Aaryan Shroff Date: Thu, 13 Jul 2023 00:58:12 -0400 Subject: [PATCH 01/11] set up prettier for tailwind class sorting --- .prettierignore | 30 ++++++++++++++++++++++++++++++ .prettierrc.json | 1 + 2 files changed, 31 insertions(+) create mode 100644 .prettierignore create mode 100644 .prettierrc.json diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..20fccdd --- /dev/null +++ b/.prettierignore @@ -0,0 +1,30 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env.local +.env.development.local +.env.test.local +.env.production.local diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1 @@ +{} From 24fb7858525ae33e8c45b2e61eb78b5ee5dd4212 Mon Sep 17 00:00:00 2001 From: Aaryan Shroff Date: Thu, 13 Jul 2023 00:58:22 -0400 Subject: [PATCH 02/11] install fontawesome and prettier --- package-lock.json | 236 +++++++++++++++++++++++++++++++++++++++++++++- package.json | 6 ++ 2 files changed, 239 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3e4bb54..7814fe2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,10 @@ "packages": { "": { "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.4.0", + "@fortawesome/free-regular-svg-icons": "^6.4.0", + "@fortawesome/free-solid-svg-icons": "^6.4.0", + "@fortawesome/react-fontawesome": "^0.2.0", "next": "latest", "react": "18.2.0", "react-dom": "18.2.0" @@ -14,6 +18,8 @@ "@types/react": "18.2.14", "autoprefixer": "^10.4.14", "postcss": "^8.4.25", + "prettier": "^3.0.0", + "prettier-plugin-tailwindcss": "^0.4.0", "tailwindcss": "^3.3.2", "typescript": "5.1.3" } @@ -30,6 +36,63 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz", + "integrity": "sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.0.tgz", + "integrity": "sha512-Bertv8xOiVELz5raB2FlXDPKt+m94MQ3JgDfsVbrqNpLU9+UE2E18GKjLKw+d3XbeYPqg1pzyQKGsrzbw+pPaw==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.4.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-regular-svg-icons": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.0.tgz", + "integrity": "sha512-ZfycI7D0KWPZtf7wtMFnQxs8qjBXArRzczABuMQqecA/nXohquJ5J/RCR77PmY5qGWkxAZDxpnUFVXKwtY/jPw==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.4.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz", + "integrity": "sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.4.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/react-fontawesome": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz", + "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==", + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "react": ">=16.3" + } + }, "node_modules/@jridgewell/gen-mapping": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz", @@ -981,7 +1044,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -1185,6 +1247,105 @@ "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", "dev": true }, + "node_modules/prettier": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.0.tgz", + "integrity": "sha512-zBf5eHpwHOGPC47h0zrPyNn+eAEIdEzfywMoYn2XPi0P44Zp0tSq64rq0xAREh4auw2cJZHo9QUob+NqCQky4g==", + "dev": true, + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, + "node_modules/prettier-plugin-tailwindcss": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.4.0.tgz", + "integrity": "sha512-Rna0sDPETA0KNhMHlN8wxKNgfSa8mTl2hPPAGxnbv6tUcHT6J4RQmQ8TLXyhB7Dm5Von4iHloBxTyClYM6wT0A==", + "dev": true, + "engines": { + "node": ">=12.17.0" + }, + "peerDependencies": { + "@ianvs/prettier-plugin-sort-imports": "*", + "@prettier/plugin-pug": "*", + "@shopify/prettier-plugin-liquid": "*", + "@shufo/prettier-plugin-blade": "*", + "@trivago/prettier-plugin-sort-imports": "*", + "prettier": "^2.2 || ^3.0", + "prettier-plugin-astro": "*", + "prettier-plugin-css-order": "*", + "prettier-plugin-import-sort": "*", + "prettier-plugin-jsdoc": "*", + "prettier-plugin-marko": "*", + "prettier-plugin-organize-attributes": "*", + "prettier-plugin-organize-imports": "*", + "prettier-plugin-style-order": "*", + "prettier-plugin-svelte": "*", + "prettier-plugin-twig-melody": "*" + }, + "peerDependenciesMeta": { + "@ianvs/prettier-plugin-sort-imports": { + "optional": true + }, + "@prettier/plugin-pug": { + "optional": true + }, + "@shopify/prettier-plugin-liquid": { + "optional": true + }, + "@shufo/prettier-plugin-blade": { + "optional": true + }, + "@trivago/prettier-plugin-sort-imports": { + "optional": true + }, + "prettier-plugin-astro": { + "optional": true + }, + "prettier-plugin-css-order": { + "optional": true + }, + "prettier-plugin-import-sort": { + "optional": true + }, + "prettier-plugin-jsdoc": { + "optional": true + }, + "prettier-plugin-marko": { + "optional": true + }, + "prettier-plugin-organize-attributes": { + "optional": true + }, + "prettier-plugin-organize-imports": { + "optional": true + }, + "prettier-plugin-style-order": { + "optional": true + }, + "prettier-plugin-svelte": { + "optional": true + }, + "prettier-plugin-twig-melody": { + "optional": true + } + } + }, + "node_modules/prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "dependencies": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -1228,6 +1389,11 @@ "react": "^18.2.0" } }, + "node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -1553,6 +1719,43 @@ "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==", "dev": true }, + "@fortawesome/fontawesome-common-types": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz", + "integrity": "sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==" + }, + "@fortawesome/fontawesome-svg-core": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.0.tgz", + "integrity": "sha512-Bertv8xOiVELz5raB2FlXDPKt+m94MQ3JgDfsVbrqNpLU9+UE2E18GKjLKw+d3XbeYPqg1pzyQKGsrzbw+pPaw==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.4.0" + } + }, + "@fortawesome/free-regular-svg-icons": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.0.tgz", + "integrity": "sha512-ZfycI7D0KWPZtf7wtMFnQxs8qjBXArRzczABuMQqecA/nXohquJ5J/RCR77PmY5qGWkxAZDxpnUFVXKwtY/jPw==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.4.0" + } + }, + "@fortawesome/free-solid-svg-icons": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz", + "integrity": "sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.4.0" + } + }, + "@fortawesome/react-fontawesome": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz", + "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==", + "requires": { + "prop-types": "^15.8.1" + } + }, "@jridgewell/gen-mapping": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz", @@ -2193,8 +2396,7 @@ "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==" }, "object-hash": { "version": "3.0.0", @@ -2312,6 +2514,29 @@ "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", "dev": true }, + "prettier": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.0.tgz", + "integrity": "sha512-zBf5eHpwHOGPC47h0zrPyNn+eAEIdEzfywMoYn2XPi0P44Zp0tSq64rq0xAREh4auw2cJZHo9QUob+NqCQky4g==", + "dev": true + }, + "prettier-plugin-tailwindcss": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.4.0.tgz", + "integrity": "sha512-Rna0sDPETA0KNhMHlN8wxKNgfSa8mTl2hPPAGxnbv6tUcHT6J4RQmQ8TLXyhB7Dm5Von4iHloBxTyClYM6wT0A==", + "dev": true, + "requires": {} + }, + "prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "requires": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, "queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -2335,6 +2560,11 @@ "scheduler": "^0.23.0" } }, + "react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index 3ffcc1c..e24bf8d 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,10 @@ "start": "next start" }, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.4.0", + "@fortawesome/free-regular-svg-icons": "^6.4.0", + "@fortawesome/free-solid-svg-icons": "^6.4.0", + "@fortawesome/react-fontawesome": "^0.2.0", "next": "latest", "react": "18.2.0", "react-dom": "18.2.0" @@ -15,6 +19,8 @@ "@types/react": "18.2.14", "autoprefixer": "^10.4.14", "postcss": "^8.4.25", + "prettier": "^3.0.0", + "prettier-plugin-tailwindcss": "^0.4.0", "tailwindcss": "^3.3.2", "typescript": "5.1.3" } From 43e2b637754e6c486a9597043ddf64836bf6cc44 Mon Sep 17 00:00:00 2001 From: Aaryan Shroff Date: Thu, 13 Jul 2023 00:58:34 -0400 Subject: [PATCH 03/11] install and use new fonts --- src/styles/globals.css | 4 ++++ tailwind.config.js | 14 ++++++++------ 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/styles/globals.css b/src/styles/globals.css index 07911f9..d1e1ecc 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -1,4 +1,8 @@ @import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&display=swap'); +/* Averia Serif Libre -- Set as our default Tailwind serif font */ +@import url('https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:ital,wght@0,400;0,700;1,400;1,700&display=swap'); +/* Rubik -- Set as our default sans-serif font */ +@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap'); @tailwind base; @tailwind components; diff --git a/tailwind.config.js b/tailwind.config.js index 85b9ae1..ac1a82a 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,11 +1,13 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - content: [ - "./src/**/*.{js,ts,jsx,tsx,mdx}" - ], + content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"], theme: { - extend: {}, + extend: { + fontFamily: { + serif: ["Averia Serif Libre"], + sans: ["Rubik"], + }, + }, }, plugins: [], -} - +}; From 73dd875fd181a7e8a13425c2d91450102349bbdb Mon Sep 17 00:00:00 2001 From: Aaryan Shroff Date: Thu, 13 Jul 2023 00:58:50 -0400 Subject: [PATCH 04/11] configure fontawesome css --- src/pages/_app.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index ea5f561..e5f4341 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,5 +1,8 @@ -import '../styles/globals.css' +import "../styles/globals.css"; +import { config } from "@fortawesome/fontawesome-svg-core"; +import "@fortawesome/fontawesome-svg-core/styles.css"; +config.autoAddCss = false; export default function MyApp({ Component, pageProps }) { - return -} \ No newline at end of file + return ; +} From 7f2cd62e779d85b251e4824b4a9387ab04e57443 Mon Sep 17 00:00:00 2001 From: Aaryan Shroff Date: Thu, 13 Jul 2023 00:58:56 -0400 Subject: [PATCH 05/11] decksaaryan --- src/pages/decks_aaryan.tsx | 55 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 src/pages/decks_aaryan.tsx diff --git a/src/pages/decks_aaryan.tsx b/src/pages/decks_aaryan.tsx new file mode 100644 index 0000000..0d10019 --- /dev/null +++ b/src/pages/decks_aaryan.tsx @@ -0,0 +1,55 @@ +import DeckAaryan from "@/components/DeckAaryan"; +import { + faLemon, + faPlane, + faTree, + faUmbrella, +} from "@fortawesome/free-solid-svg-icons"; + +export default function DecksAaryan() { + const today = new Date(); + return ( +
+ + {/* + + */} +
+ ); +} From 36336c03c9e7fc8db2a06d90a3ee343e55deb938 Mon Sep 17 00:00:00 2001 From: Aaryan Shroff Date: Thu, 13 Jul 2023 00:59:01 -0400 Subject: [PATCH 06/11] DeckAaryan --- src/components/DeckAaryan.tsx | 75 +++++++++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 src/components/DeckAaryan.tsx diff --git a/src/components/DeckAaryan.tsx b/src/components/DeckAaryan.tsx new file mode 100644 index 0000000..9dd3153 --- /dev/null +++ b/src/components/DeckAaryan.tsx @@ -0,0 +1,75 @@ +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import ProgressRing from "./ProgressRing"; +import { IconProp } from "@fortawesome/fontawesome-svg-core"; + +type TailwindColor = string; +type rgbColor = string; + +interface DeckAaryanProps { + title: string; + completedCards: number; + totalCards: number; + icon: IconProp; + nextReview: Date; + bgColor: TailwindColor; + shadowColor: rgbColor; +} + +export default function DeckAaryan({ + title, + completedCards, + totalCards, + icon, + nextReview, + bgColor, + shadowColor, +}: DeckAaryanProps) { + const daysUntilNextReview = Math.ceil( + (nextReview.getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24), + ); + + let badgeBgColor, badgeTextColor, badgeText; + if (daysUntilNextReview <= 0) { + badgeBgColor = "bg-rose-500"; + badgeTextColor = "text-white"; + badgeText = "Due for review"; + } else { + badgeBgColor = "bg-white"; + badgeTextColor = bgColor.replace("bg", "text"); + badgeText = `Next review in ${daysUntilNextReview} days`; + } + + return ( +
+
+
+ +
+ +
+
+
+

{title}

+

+ {completedCards}/{totalCards} +

+
+ + {badgeText} + +
+
+ ); +} From 8101ce22cdae490308b408290d492d791f6a4b67 Mon Sep 17 00:00:00 2001 From: Aaryan Shroff Date: Thu, 13 Jul 2023 00:59:06 -0400 Subject: [PATCH 07/11] ProgressRing --- src/components/ProgressRing.tsx | 42 +++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 src/components/ProgressRing.tsx diff --git a/src/components/ProgressRing.tsx b/src/components/ProgressRing.tsx new file mode 100644 index 0000000..3e07276 --- /dev/null +++ b/src/components/ProgressRing.tsx @@ -0,0 +1,42 @@ +interface ProgressRingProps { + radius: number; + strokeWidth: number; + progress: number; +} + +export default function ProgressRing({ + radius, + strokeWidth, + progress, +}: ProgressRingProps) { + const [width, height] = Array(2).fill(2 * (radius + strokeWidth)); + const circumference = 2 * Math.PI * radius; + + const offset = circumference - progress * circumference; + + return ( + + + + + ); +} From bc56e520b14e7996854d3866c08644de7dfa0bd3 Mon Sep 17 00:00:00 2001 From: Aaryan Shroff Date: Thu, 13 Jul 2023 20:58:46 -0400 Subject: [PATCH 08/11] fix typo --- src/components/ProgressRing.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ProgressRing.tsx b/src/components/ProgressRing.tsx index 3e07276..8619d7e 100644 --- a/src/components/ProgressRing.tsx +++ b/src/components/ProgressRing.tsx @@ -31,7 +31,7 @@ export default function ProgressRing({ strokeWidth={strokeWidth * 1.1} strokeDasharray={`${circumference} ${circumference}`} strokeDashoffset={offset} - stroke-linecap="round" + strokeLinecap="round" fill={"transparent"} r={radius} cx={width / 2} From 8a374a5659477807090fece49f9cca21f16f57e9 Mon Sep 17 00:00:00 2001 From: Aaryan Shroff Date: Thu, 13 Jul 2023 20:59:08 -0400 Subject: [PATCH 09/11] fix shadow color --- src/components/DeckAaryan.tsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/components/DeckAaryan.tsx b/src/components/DeckAaryan.tsx index 9dd3153..62d40dd 100644 --- a/src/components/DeckAaryan.tsx +++ b/src/components/DeckAaryan.tsx @@ -42,7 +42,8 @@ export default function DeckAaryan({ return (
- +
-

{title}

-

+

{title}

+

{completedCards}/{totalCards}

- {badgeText} - +

); From bc04ff18096e084b3488d1428ccece01013a3913 Mon Sep 17 00:00:00 2001 From: Aaryan Shroff Date: Thu, 13 Jul 2023 21:12:15 -0400 Subject: [PATCH 10/11] fix colors --- src/components/DeckAaryan.tsx | 14 ++++++----- src/pages/decks_aaryan.tsx | 45 ++++++++++++++++++++++++++--------- 2 files changed, 42 insertions(+), 17 deletions(-) diff --git a/src/components/DeckAaryan.tsx b/src/components/DeckAaryan.tsx index 62d40dd..ec8e022 100644 --- a/src/components/DeckAaryan.tsx +++ b/src/components/DeckAaryan.tsx @@ -2,7 +2,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import ProgressRing from "./ProgressRing"; import { IconProp } from "@fortawesome/fontawesome-svg-core"; -type TailwindColor = string; type rgbColor = string; interface DeckAaryanProps { @@ -11,7 +10,7 @@ interface DeckAaryanProps { totalCards: number; icon: IconProp; nextReview: Date; - bgColor: TailwindColor; + bgColor: rgbColor; shadowColor: rgbColor; } @@ -31,19 +30,22 @@ export default function DeckAaryan({ let badgeBgColor, badgeTextColor, badgeText; if (daysUntilNextReview <= 0) { badgeBgColor = "bg-rose-500"; - badgeTextColor = "text-white"; + badgeTextColor = "rgb(255, 255, 255)"; badgeText = "Due for review"; } else { badgeBgColor = "bg-white"; - badgeTextColor = bgColor.replace("bg", "text"); + badgeTextColor = bgColor; badgeText = `Next review in ${daysUntilNextReview} days`; } return (
- {/* */} + bgColor={colors.yellow.light} + shadowColor={colors.yellow.dark} + />
); } From 4af6746184b52c3300372fb51c81bbca0360a324 Mon Sep 17 00:00:00 2001 From: Eric Huang Date: Wed, 26 Jul 2023 04:41:29 -0400 Subject: [PATCH 11/11] Fix it to work on /decks, with default values for now (will change later) --- src/components/{DeckAaryan.tsx => Deck.tsx} | 6 +- src/pages/decks.tsx | 62 ++++++---------- src/pages/decks_aaryan.tsx | 78 --------------------- src/ts/types.ts | 2 +- 4 files changed, 27 insertions(+), 121 deletions(-) rename src/components/{DeckAaryan.tsx => Deck.tsx} (95%) delete mode 100644 src/pages/decks_aaryan.tsx diff --git a/src/components/DeckAaryan.tsx b/src/components/Deck.tsx similarity index 95% rename from src/components/DeckAaryan.tsx rename to src/components/Deck.tsx index ec8e022..d2db56a 100644 --- a/src/components/DeckAaryan.tsx +++ b/src/components/Deck.tsx @@ -4,7 +4,7 @@ import { IconProp } from "@fortawesome/fontawesome-svg-core"; type rgbColor = string; -interface DeckAaryanProps { +export interface DeckProps { title: string; completedCards: number; totalCards: number; @@ -14,7 +14,7 @@ interface DeckAaryanProps { shadowColor: rgbColor; } -export default function DeckAaryan({ +export default function Deck({ title, completedCards, totalCards, @@ -22,7 +22,7 @@ export default function DeckAaryan({ nextReview, bgColor, shadowColor, -}: DeckAaryanProps) { +}: DeckProps) { const daysUntilNextReview = Math.ceil( (nextReview.getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24), ); diff --git a/src/pages/decks.tsx b/src/pages/decks.tsx index 6c14f11..83cf845 100644 --- a/src/pages/decks.tsx +++ b/src/pages/decks.tsx @@ -1,47 +1,31 @@ -import { Deck } from "../ts/types.ts" -import deckstyle from "../styles/Deck.module.css"; -import Image from 'next/image'; -import { useState } from "react"; -import Link from "next/link"; - -function DeckComponent(props: Deck) { - return ( -
-
-

Created on: {props.created_on.toLocaleDateString()}, {props.created_on.toLocaleTimeString()}

-

{props.name}

-
- - Go to Deck Info - Go to reviews - -
- - jsl - - - - - -
-
SRS Application
-
-
-
- ); -} +import Deck, { DeckProps } from '@/components/Deck' +import { faLemon } from "@fortawesome/free-solid-svg-icons"; export default function Decks(props: {decks: Array<{name: string, created_on: string, id: number}>}) { // turn it into decks as necessary - const decks: Array = props.decks.map( - (deck) => new Deck(deck["name"], deck["created_on"], deck["id"]) + const decks: DeckProps[] = props.decks.map( + (deck) => ({ + title: deck["name"], + completedCards: 0, + totalCards: 10, + icon: faLemon, + nextReview: new Date(), + bgColor:"rgb(139, 92, 246)", + shadowColor:"rgb(91, 33, 182)" + }) ); - return
- {decks.map((deck: Deck, key: number) => { - return - })} -
; + return ( +
+ {decks.map((deck: DeckProps, key: number) => { + return + })} +
+ ) } export async function getStaticProps() { diff --git a/src/pages/decks_aaryan.tsx b/src/pages/decks_aaryan.tsx deleted file mode 100644 index 1a66663..0000000 --- a/src/pages/decks_aaryan.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import DeckAaryan from "@/components/DeckAaryan"; -import { - faLemon, - faPlane, - faTree, - faUmbrella, -} from "@fortawesome/free-solid-svg-icons"; - -// Colors from https://tailwindcolor.com/ -// dark are 800s -// light are 500s -// Tailwind JIT wasn't working when colors were passed as props :( -const colors = { - violet: { - light: "rgb(139, 92, 246)", - dark: "rgb(91, 33, 182)", - }, - orange: { - light: "rgb(249, 115, 22)", - dark: "rgb(154, 52, 18)", - }, - green: { - light: "rgb(34, 197, 94)", - dark: "rgb(22, 101, 52)", - }, - yellow: { - light: "rgb(234, 179, 8)", - dark: "rgb(133, 77, 14)", - }, -}; - -export default function DecksAaryan() { - const today = new Date(); - return ( -
- - - - -
- ); -} diff --git a/src/ts/types.ts b/src/ts/types.ts index 3cb1eda..b893817 100644 --- a/src/ts/types.ts +++ b/src/ts/types.ts @@ -1,5 +1,5 @@ // defining common types to use throughout -export class Deck { +export class DeckInType { name: string; created_on: Date; id: number;