From 884a5c8944c16199d19cf351b98f863813d4b2f5 Mon Sep 17 00:00:00 2001 From: Timothy Russo <timothy.russo.ext@adevinta.com> Date: Sat, 26 Aug 2023 15:33:02 +0200 Subject: [PATCH 01/22] feat: folder structure for the Tech stack card component --- src/app/feature/components/TechStackCard.tsx | 23 +++++++++++++++++++ .../components/fixtures/TechStackCard.ts | 1 + src/app/feature/components/index.ts | 1 + 3 files changed, 25 insertions(+) create mode 100644 src/app/feature/components/TechStackCard.tsx create mode 100644 src/app/feature/components/fixtures/TechStackCard.ts create mode 100644 src/app/feature/components/index.ts diff --git a/src/app/feature/components/TechStackCard.tsx b/src/app/feature/components/TechStackCard.tsx new file mode 100644 index 00000000..576cd276 --- /dev/null +++ b/src/app/feature/components/TechStackCard.tsx @@ -0,0 +1,23 @@ +import { frontend } from "./fixtures/TechStackCard"; + +export default function TechStackCard() { + return ( + <div className="card w-96 text-primary-content bg-neutral-50 rounded-lg"> + <div className="flex flex-row justify-between"> + <h2 className="text-xl font-semibold text-neutral-900 mt-5 ml-5"> + Frontend + </h2> + <button type="button" className="btn mt-5 mr-5"> + Edit + </button> + </div> + <div className="h-40 overflow-y-auto ml-5 mr-5 mt-6 mb-5"> + <ul className="text-neutral-900"> + {frontend.map(element => + <li className="text-base mb-5" key={element}>{element}</li> + )} + </ul> + </div> + </div> + ); +} diff --git a/src/app/feature/components/fixtures/TechStackCard.ts b/src/app/feature/components/fixtures/TechStackCard.ts new file mode 100644 index 00000000..b243a25e --- /dev/null +++ b/src/app/feature/components/fixtures/TechStackCard.ts @@ -0,0 +1 @@ +export const frontend = ['JavaScript', 'React', 'Vue', 'Angular', 'TypeScript'] \ No newline at end of file diff --git a/src/app/feature/components/index.ts b/src/app/feature/components/index.ts new file mode 100644 index 00000000..1ca0557a --- /dev/null +++ b/src/app/feature/components/index.ts @@ -0,0 +1 @@ +export { default as TechStackCard } from "./TechStackCard"; From 647605ed8ef5db4411f33e4fe469744ee3a38645 Mon Sep 17 00:00:00 2001 From: Timothy Russo <timothy.russo.ext@adevinta.com> Date: Sat, 26 Aug 2023 15:40:48 +0200 Subject: [PATCH 02/22] feat: Avatar component folder structure --- src/app/feature/components/TechStackCard.tsx | 8 +++++--- src/app/feature/components/fixtures/TechStackCard.ts | 2 +- src/components/Avatar.tsx | 3 +++ src/components/index.ts | 1 + 4 files changed, 10 insertions(+), 4 deletions(-) create mode 100644 src/components/Avatar.tsx diff --git a/src/app/feature/components/TechStackCard.tsx b/src/app/feature/components/TechStackCard.tsx index 576cd276..a8cda7c2 100644 --- a/src/app/feature/components/TechStackCard.tsx +++ b/src/app/feature/components/TechStackCard.tsx @@ -13,9 +13,11 @@ export default function TechStackCard() { </div> <div className="h-40 overflow-y-auto ml-5 mr-5 mt-6 mb-5"> <ul className="text-neutral-900"> - {frontend.map(element => - <li className="text-base mb-5" key={element}>{element}</li> - )} + {frontend.map((element) => ( + <li className="text-base mb-5" key={element}> + {element} + </li> + ))} </ul> </div> </div> diff --git a/src/app/feature/components/fixtures/TechStackCard.ts b/src/app/feature/components/fixtures/TechStackCard.ts index b243a25e..5e5d9f42 100644 --- a/src/app/feature/components/fixtures/TechStackCard.ts +++ b/src/app/feature/components/fixtures/TechStackCard.ts @@ -1 +1 @@ -export const frontend = ['JavaScript', 'React', 'Vue', 'Angular', 'TypeScript'] \ No newline at end of file +export const frontend = ["JavaScript", "React", "Vue", "Angular", "TypeScript"]; diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx new file mode 100644 index 00000000..f8eb46bc --- /dev/null +++ b/src/components/Avatar.tsx @@ -0,0 +1,3 @@ +export default function Avatar() { + return <div></div>; +} diff --git a/src/components/index.ts b/src/components/index.ts index 396a2b73..39a15b83 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1 +1,2 @@ export { default as StoreProvider } from "./StoreProvider"; +export { default as Avatar } from "./Avatar"; From 23476fdb3b930597e661acfd98fbcc8eb7b51851 Mon Sep 17 00:00:00 2001 From: Timothy Russo <timothy.russo.ext@adevinta.com> Date: Sat, 26 Aug 2023 16:31:05 +0200 Subject: [PATCH 03/22] feat: style the scrollbar --- src/app/feature/components/TechStackCard.tsx | 2 +- .../components/fixtures/TechStackCard.ts | 2 +- src/app/globals.css | 19 +++++++++++++++++++ 3 files changed, 21 insertions(+), 2 deletions(-) diff --git a/src/app/feature/components/TechStackCard.tsx b/src/app/feature/components/TechStackCard.tsx index a8cda7c2..15831496 100644 --- a/src/app/feature/components/TechStackCard.tsx +++ b/src/app/feature/components/TechStackCard.tsx @@ -7,7 +7,7 @@ export default function TechStackCard() { <h2 className="text-xl font-semibold text-neutral-900 mt-5 ml-5"> Frontend </h2> - <button type="button" className="btn mt-5 mr-5"> + <button type="button" className="btn mt-5 mr-5 capitalize"> Edit </button> </div> diff --git a/src/app/feature/components/fixtures/TechStackCard.ts b/src/app/feature/components/fixtures/TechStackCard.ts index 5e5d9f42..47289a59 100644 --- a/src/app/feature/components/fixtures/TechStackCard.ts +++ b/src/app/feature/components/fixtures/TechStackCard.ts @@ -1 +1 @@ -export const frontend = ["JavaScript", "React", "Vue", "Angular", "TypeScript"]; +export const frontend: string[] = ["JavaScript", "React", "Vue", "Angular", "TypeScript"]; diff --git a/src/app/globals.css b/src/app/globals.css index b5c61c95..8640c900 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,3 +1,22 @@ @tailwind base; @tailwind components; @tailwind utilities; + + +::-webkit-scrollbar { + width: 4px; +} + +::-webkit-scrollbar-track { + background: #C0C0C0; + border-radius: 2px; +} + +::-webkit-scrollbar-thumb { + background: #919191; + border-radius: 5px; +} + +::-webkit-scrollbar-thumb:hover { + background: #919191; +} \ No newline at end of file From 5987154c673422978fa1c1bfc6502b984dd50162 Mon Sep 17 00:00:00 2001 From: Timothy Russo <timothy.russo.ext@adevinta.com> Date: Sun, 27 Aug 2023 13:30:42 +0200 Subject: [PATCH 04/22] feat: add Avatar component --- src/app/feature/components/TechStackCard.tsx | 24 ++++++++++++++----- .../components/fixtures/TechStackCard.ts | 8 ++++++- src/components/Avatar.tsx | 6 ++++- 3 files changed, 30 insertions(+), 8 deletions(-) diff --git a/src/app/feature/components/TechStackCard.tsx b/src/app/feature/components/TechStackCard.tsx index 15831496..4c601295 100644 --- a/src/app/feature/components/TechStackCard.tsx +++ b/src/app/feature/components/TechStackCard.tsx @@ -1,21 +1,33 @@ import { frontend } from "./fixtures/TechStackCard"; +import { Avatar } from "@/components"; export default function TechStackCard() { return ( - <div className="card w-96 text-primary-content bg-neutral-50 rounded-lg"> + <div className="card w-96 text-primary-content bg-neutral-100 rounded-lg"> <div className="flex flex-row justify-between"> - <h2 className="text-xl font-semibold text-neutral-900 mt-5 ml-5"> + <h2 className="text-xl font-semibold text-neutral-900 mt-5 ml-5 self-center"> Frontend </h2> - <button type="button" className="btn mt-5 mr-5 capitalize"> + <button + type="button" + className="btn mt-5 mr-5 capitalize w-16 h-8 min-h-full text-sm font-semibold text-neutral-500 bg-white border-transparent" + > Edit </button> </div> <div className="h-40 overflow-y-auto ml-5 mr-5 mt-6 mb-5"> - <ul className="text-neutral-900"> + <ul className="text-neutral-900 last:mb-0"> {frontend.map((element) => ( - <li className="text-base mb-5" key={element}> - {element} + <li + className="text-base mb-5 last:mb-0 relative grid grid-cols-[1fr,auto] items-center" + key={element.id} + > + {element.value} + <div className="avatar-group -space-x-2 absolute left-28"> + {element.users.map((user) => ( + <Avatar key={`${element.id}-${user}`} /> + ))} + </div> </li> ))} </ul> diff --git a/src/app/feature/components/fixtures/TechStackCard.ts b/src/app/feature/components/fixtures/TechStackCard.ts index 47289a59..b9274ad7 100644 --- a/src/app/feature/components/fixtures/TechStackCard.ts +++ b/src/app/feature/components/fixtures/TechStackCard.ts @@ -1 +1,7 @@ -export const frontend: string[] = ["JavaScript", "React", "Vue", "Angular", "TypeScript"]; +export const frontend = [ + { id: 1, value: "JavaScript", users: ["Tim", "John"] }, + { id: 2, value: "React", users: ["John"] }, + { id: 3, value: "Vue", users: ["Myke", "Josh", "Jack"] }, + { id: 4, value: "Angular", users: ["John"] }, + { id: 5, value: "TypeScript", users: ["Jack", "John"] }, +]; diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx index f8eb46bc..e7ef1fa7 100644 --- a/src/components/Avatar.tsx +++ b/src/components/Avatar.tsx @@ -1,3 +1,7 @@ export default function Avatar() { - return <div></div>; + return ( + <div className="avatar bg-neutral-300 rounded-full border-2 border-neutral-100"> + <div className="w-6"></div> + </div> + ); } From 6ea3ddfd3c8cd098e0ccb2bd0db4ca4a0db406ef Mon Sep 17 00:00:00 2001 From: Timothy Russo <timothy.russo.ext@adevinta.com> Date: Sun, 27 Aug 2023 14:05:47 +0200 Subject: [PATCH 05/22] feat: update scrollbar color --- src/app/globals.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index 8640c900..cc294bc0 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -8,15 +8,15 @@ } ::-webkit-scrollbar-track { - background: #C0C0C0; + background: #919191; border-radius: 2px; } ::-webkit-scrollbar-thumb { - background: #919191; + background: #C0C0C0; border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { - background: #919191; + background: #C0C0C0; } \ No newline at end of file From 0f842971df7a29e7d6f2212c5676076338d11c34 Mon Sep 17 00:00:00 2001 From: Timothy Russo <timothy.russo.ext@adevinta.com> Date: Sun, 27 Aug 2023 14:28:01 +0200 Subject: [PATCH 06/22] feat: improve accessibility --- src/app/feature/components/TechStackCard.tsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/app/feature/components/TechStackCard.tsx b/src/app/feature/components/TechStackCard.tsx index 4c601295..0aff0df0 100644 --- a/src/app/feature/components/TechStackCard.tsx +++ b/src/app/feature/components/TechStackCard.tsx @@ -1,21 +1,26 @@ import { frontend } from "./fixtures/TechStackCard"; import { Avatar } from "@/components"; -export default function TechStackCard() { +interface TechStackCardProps { + title: string +} + +export default function TechStackCard({ title }: TechStackCardProps) { return ( <div className="card w-96 text-primary-content bg-neutral-100 rounded-lg"> <div className="flex flex-row justify-between"> - <h2 className="text-xl font-semibold text-neutral-900 mt-5 ml-5 self-center"> - Frontend - </h2> + <h3 className="text-xl font-semibold text-neutral-900 mt-5 ml-5 self-center"> + {title} + </h3> <button type="button" className="btn mt-5 mr-5 capitalize w-16 h-8 min-h-full text-sm font-semibold text-neutral-500 bg-white border-transparent" + aria-label={`Edit ${title}`} > Edit </button> </div> - <div className="h-40 overflow-y-auto ml-5 mr-5 mt-6 mb-5"> + <div className="h-40 overflow-y-auto mx-5 mt-6 mb-5"> <ul className="text-neutral-900 last:mb-0"> {frontend.map((element) => ( <li From fd9ff9192912eb616a0605bc2e510059b1f45cef Mon Sep 17 00:00:00 2001 From: Timothy Russo <timothy.russo.ext@adevinta.com> Date: Sun, 27 Aug 2023 15:24:21 +0200 Subject: [PATCH 07/22] feat: add Tech Stack Container --- .../components/TechStackCard.tsx | 4 ++-- .../TechStack/components/TechStackContainer.tsx | 16 ++++++++++++++++ .../components/fixtures/TechStack.ts} | 9 +++++++++ src/app/TechStack/components/index.ts | 2 ++ src/app/feature/components/index.ts | 1 - tailwind.config.js | 4 +++- 6 files changed, 32 insertions(+), 4 deletions(-) rename src/app/{feature => TechStack}/components/TechStackCard.tsx (95%) create mode 100644 src/app/TechStack/components/TechStackContainer.tsx rename src/app/{feature/components/fixtures/TechStackCard.ts => TechStack/components/fixtures/TechStack.ts} (70%) create mode 100644 src/app/TechStack/components/index.ts delete mode 100644 src/app/feature/components/index.ts diff --git a/src/app/feature/components/TechStackCard.tsx b/src/app/TechStack/components/TechStackCard.tsx similarity index 95% rename from src/app/feature/components/TechStackCard.tsx rename to src/app/TechStack/components/TechStackCard.tsx index 0aff0df0..bc5b6b7c 100644 --- a/src/app/feature/components/TechStackCard.tsx +++ b/src/app/TechStack/components/TechStackCard.tsx @@ -1,8 +1,8 @@ -import { frontend } from "./fixtures/TechStackCard"; +import { frontend } from "./fixtures/TechStack"; import { Avatar } from "@/components"; interface TechStackCardProps { - title: string + title: string; } export default function TechStackCard({ title }: TechStackCardProps) { diff --git a/src/app/TechStack/components/TechStackContainer.tsx b/src/app/TechStack/components/TechStackContainer.tsx new file mode 100644 index 00000000..4ad6479e --- /dev/null +++ b/src/app/TechStack/components/TechStackContainer.tsx @@ -0,0 +1,16 @@ +import { cards } from "./fixtures/TechStack"; +import { TechStackCard } from "."; + +export default function TechStackContainer() { + return ( + <div className="card w-tech-card-container bg-primary p-10"> + <ul className="grid grid-cols-3 gap-y-20"> + {cards.map((element) => ( + <li className="mx-auto" key={element}> + <TechStackCard title={element} /> + </li> + ))} + </ul> + </div> + ); +} diff --git a/src/app/feature/components/fixtures/TechStackCard.ts b/src/app/TechStack/components/fixtures/TechStack.ts similarity index 70% rename from src/app/feature/components/fixtures/TechStackCard.ts rename to src/app/TechStack/components/fixtures/TechStack.ts index b9274ad7..52f8e797 100644 --- a/src/app/feature/components/fixtures/TechStackCard.ts +++ b/src/app/TechStack/components/fixtures/TechStack.ts @@ -1,3 +1,12 @@ +export const cards = [ + "Frontend", + "CSS Library", + "Backend", + "Project Management", + "Server-Side", + "Hoisting", +]; + export const frontend = [ { id: 1, value: "JavaScript", users: ["Tim", "John"] }, { id: 2, value: "React", users: ["John"] }, diff --git a/src/app/TechStack/components/index.ts b/src/app/TechStack/components/index.ts new file mode 100644 index 00000000..b49b4cb9 --- /dev/null +++ b/src/app/TechStack/components/index.ts @@ -0,0 +1,2 @@ +export { default as TechStackCard } from "./TechStackCard"; +export { default as TechStackContainer } from "./TechStackContainer"; diff --git a/src/app/feature/components/index.ts b/src/app/feature/components/index.ts deleted file mode 100644 index 1ca0557a..00000000 --- a/src/app/feature/components/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as TechStackCard } from "./TechStackCard"; diff --git a/tailwind.config.js b/tailwind.config.js index 51f40985..43c042e2 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -5,7 +5,9 @@ module.exports = { "./src/app/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { - extend: {}, + extend: {width: { + 'tech-card-container': '85.5625rem', + },}, }, plugins: [require("daisyui")], }; From 95ca3ce516b3c1085b04dae1681338da5e4898ea Mon Sep 17 00:00:00 2001 From: Timothy Russo <russotimothy@live.it> Date: Mon, 28 Aug 2023 09:10:58 +0200 Subject: [PATCH 08/22] feat: updata data for the cards --- .../TechStack/components/TechStackCard.tsx | 7 +- .../components/TechStackContainer.tsx | 8 +-- .../components/fixtures/TechStack.ts | 72 +++++++++++++++---- tailwind.config.js | 8 ++- 4 files changed, 70 insertions(+), 25 deletions(-) diff --git a/src/app/TechStack/components/TechStackCard.tsx b/src/app/TechStack/components/TechStackCard.tsx index bc5b6b7c..ca3cc741 100644 --- a/src/app/TechStack/components/TechStackCard.tsx +++ b/src/app/TechStack/components/TechStackCard.tsx @@ -1,11 +1,12 @@ -import { frontend } from "./fixtures/TechStack"; +import { TechItem } from "./fixtures/TechStack"; import { Avatar } from "@/components"; interface TechStackCardProps { title: string; + data: TechItem[]; } -export default function TechStackCard({ title }: TechStackCardProps) { +export default function TechStackCard({ title, data }: TechStackCardProps) { return ( <div className="card w-96 text-primary-content bg-neutral-100 rounded-lg"> <div className="flex flex-row justify-between"> @@ -22,7 +23,7 @@ export default function TechStackCard({ title }: TechStackCardProps) { </div> <div className="h-40 overflow-y-auto mx-5 mt-6 mb-5"> <ul className="text-neutral-900 last:mb-0"> - {frontend.map((element) => ( + {data.map((element) => ( <li className="text-base mb-5 last:mb-0 relative grid grid-cols-[1fr,auto] items-center" key={element.id} diff --git a/src/app/TechStack/components/TechStackContainer.tsx b/src/app/TechStack/components/TechStackContainer.tsx index 4ad6479e..523173c0 100644 --- a/src/app/TechStack/components/TechStackContainer.tsx +++ b/src/app/TechStack/components/TechStackContainer.tsx @@ -1,13 +1,13 @@ -import { cards } from "./fixtures/TechStack"; +import { techStack } from "./fixtures/TechStack"; import { TechStackCard } from "."; export default function TechStackContainer() { return ( <div className="card w-tech-card-container bg-primary p-10"> <ul className="grid grid-cols-3 gap-y-20"> - {cards.map((element) => ( - <li className="mx-auto" key={element}> - <TechStackCard title={element} /> + {Object.keys(techStack).map((cardType) => ( + <li className="mx-auto" key={cardType}> + <TechStackCard title={cardType} data={techStack[cardType as keyof typeof techStack]} /> </li> ))} </ul> diff --git a/src/app/TechStack/components/fixtures/TechStack.ts b/src/app/TechStack/components/fixtures/TechStack.ts index 52f8e797..e3b2a597 100644 --- a/src/app/TechStack/components/fixtures/TechStack.ts +++ b/src/app/TechStack/components/fixtures/TechStack.ts @@ -1,16 +1,58 @@ -export const cards = [ - "Frontend", - "CSS Library", - "Backend", - "Project Management", - "Server-Side", - "Hoisting", -]; +type CardType = + | "Frontend" + | "CSS Library" + | "Backend" + | "Project Management" + | "Server-Side" + | "Hosting"; -export const frontend = [ - { id: 1, value: "JavaScript", users: ["Tim", "John"] }, - { id: 2, value: "React", users: ["John"] }, - { id: 3, value: "Vue", users: ["Myke", "Josh", "Jack"] }, - { id: 4, value: "Angular", users: ["John"] }, - { id: 5, value: "TypeScript", users: ["Jack", "John"] }, -]; +export interface TechItem { + id: number; + value: string; + users: string[]; +} + +export const techStack: Record<CardType, TechItem[]> = { + 'Frontend': [ + { id: 1, value: "JavaScript", users: ["Tim", "John"] }, + { id: 2, value: "React", users: ["John"] }, + { id: 3, value: "Vue", users: ["Myke", "Josh", "Jack"] }, + { id: 4, value: "Angular", users: ["John"] }, + { id: 5, value: "TypeScript", users: ["Jack", "John"] }, + ], + "CSS Library": [ + { id: 1, value: "Tailwind", users: ["Tim", "John"] }, + { id: 2, value: "Bootstrap", users: ["John"] }, + { id: 3, value: "Daisy UI", users: ["Myke", "Josh", "Jack"] }, + { id: 4, value: "Vanilla CSS", users: ["John"] }, + { id: 5, value: "Materialize", users: ["Jack", "John"] }, + ], + 'Backend': [ + { id: 1, value: "Node", users: ["Tim", "John"] }, + { id: 2, value: "NET", users: ["John"] }, + { id: 3, value: "Ruby", users: ["Myke", "Josh", "Jack"] }, + { id: 4, value: "Java", users: ["John"] }, + { id: 5, value: "Python", users: ["Jack", "John"] }, + ], + "Project Management": [ + { id: 1, value: "Jira", users: ["Tim", "John"] }, + { id: 2, value: "GitLab", users: ["John"] }, + { id: 3, value: "Trello", users: ["Myke", "Josh", "Jack"] }, + { id: 4, value: "Notion", users: ["John"] }, + { id: 5, value: "Obsidian", users: ["Jack", "John"] }, + ], + "Server-Side": [ + { id: 1, value: "AWS", users: ["Tim", "John"] }, + { id: 2, value: "Azure", users: ["John"] }, + { id: 3, value: "Firebase", users: ["Myke", "Josh", "Jack"] }, + { id: 4, value: "Linode", users: ["John"] }, + { id: 5, value: "Google Cloud", users: ["Jack", "John"] }, + ], + 'Hosting': [ + { id: 1, value: "Heroku", users: ["Tim", "John"] }, + { id: 2, value: "Netlify", users: ["John"] }, + { id: 3, value: "Github", users: ["Myke", "Josh", "Jack"] }, + { id: 4, value: "Render", users: ["John"] }, + { id: 5, value: "Bluocean", users: ["Jack", "John"] }, + ], +}; diff --git a/tailwind.config.js b/tailwind.config.js index 43c042e2..ce8408ae 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -5,9 +5,11 @@ module.exports = { "./src/app/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { - extend: {width: { - 'tech-card-container': '85.5625rem', - },}, + extend: { + width: { + "tech-card-container": "85.5625rem", + }, + }, }, plugins: [require("daisyui")], }; From 90741fbe4b085aaf2f49c03fa03406a97a7605b4 Mon Sep 17 00:00:00 2001 From: Timothy Russo <russotimothy@live.it> Date: Mon, 28 Aug 2023 09:15:49 +0200 Subject: [PATCH 09/22] feat: add custom width --- tailwind.config.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/tailwind.config.js b/tailwind.config.js index 335285e0..844ea325 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -4,7 +4,13 @@ module.exports = { "./src/components/**/*.{js,ts,jsx,tsx,mdx}", "./src/app/**/*.{js,ts,jsx,tsx,mdx}", ], - theme: {}, + theme: { + extend: { + width: { + "tech-card-container": "85.5625rem", + }, + }, + }, daisyui: { themes: [ { From 46067ce99288654fdda882b75979fa80618feb13 Mon Sep 17 00:00:00 2001 From: Timothy Russo <russotimothy@live.it> Date: Mon, 28 Aug 2023 10:42:56 +0200 Subject: [PATCH 10/22] fix: prettier errors --- .../TechStack/components/TechStackContainer.tsx | 7 +++++-- src/app/TechStack/components/fixtures/TechStack.ts | 14 +++++++------- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/app/TechStack/components/TechStackContainer.tsx b/src/app/TechStack/components/TechStackContainer.tsx index 523173c0..7a6851ab 100644 --- a/src/app/TechStack/components/TechStackContainer.tsx +++ b/src/app/TechStack/components/TechStackContainer.tsx @@ -5,9 +5,12 @@ export default function TechStackContainer() { return ( <div className="card w-tech-card-container bg-primary p-10"> <ul className="grid grid-cols-3 gap-y-20"> - {Object.keys(techStack).map((cardType) => ( + {Object.keys(techStack).map((cardType) => ( <li className="mx-auto" key={cardType}> - <TechStackCard title={cardType} data={techStack[cardType as keyof typeof techStack]} /> + <TechStackCard + title={cardType} + data={techStack[cardType as keyof typeof techStack]} + /> </li> ))} </ul> diff --git a/src/app/TechStack/components/fixtures/TechStack.ts b/src/app/TechStack/components/fixtures/TechStack.ts index e3b2a597..e48841f9 100644 --- a/src/app/TechStack/components/fixtures/TechStack.ts +++ b/src/app/TechStack/components/fixtures/TechStack.ts @@ -1,4 +1,4 @@ -type CardType = +type CardType = | "Frontend" | "CSS Library" | "Backend" @@ -7,13 +7,13 @@ type CardType = | "Hosting"; export interface TechItem { - id: number; - value: string; - users: string[]; + id: number; + value: string; + users: string[]; } export const techStack: Record<CardType, TechItem[]> = { - 'Frontend': [ + Frontend: [ { id: 1, value: "JavaScript", users: ["Tim", "John"] }, { id: 2, value: "React", users: ["John"] }, { id: 3, value: "Vue", users: ["Myke", "Josh", "Jack"] }, @@ -27,7 +27,7 @@ export const techStack: Record<CardType, TechItem[]> = { { id: 4, value: "Vanilla CSS", users: ["John"] }, { id: 5, value: "Materialize", users: ["Jack", "John"] }, ], - 'Backend': [ + Backend: [ { id: 1, value: "Node", users: ["Tim", "John"] }, { id: 2, value: "NET", users: ["John"] }, { id: 3, value: "Ruby", users: ["Myke", "Josh", "Jack"] }, @@ -48,7 +48,7 @@ export const techStack: Record<CardType, TechItem[]> = { { id: 4, value: "Linode", users: ["John"] }, { id: 5, value: "Google Cloud", users: ["Jack", "John"] }, ], - 'Hosting': [ + Hosting: [ { id: 1, value: "Heroku", users: ["Tim", "John"] }, { id: 2, value: "Netlify", users: ["John"] }, { id: 3, value: "Github", users: ["Myke", "Josh", "Jack"] }, From 550f178aa65af296d5956ac48b8478bfc87d8979 Mon Sep 17 00:00:00 2001 From: Timothy Russo <russotimothy@live.it> Date: Mon, 28 Aug 2023 15:46:43 +0200 Subject: [PATCH 11/22] feat: add pencil icon --- src/app/TechStack/components/TechStackCard.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/app/TechStack/components/TechStackCard.tsx b/src/app/TechStack/components/TechStackCard.tsx index ca3cc741..9e72c20b 100644 --- a/src/app/TechStack/components/TechStackCard.tsx +++ b/src/app/TechStack/components/TechStackCard.tsx @@ -1,3 +1,4 @@ +import { PencilSquareIcon } from "@heroicons/react/24/solid"; import { TechItem } from "./fixtures/TechStack"; import { Avatar } from "@/components"; @@ -15,9 +16,10 @@ export default function TechStackCard({ title, data }: TechStackCardProps) { </h3> <button type="button" - className="btn mt-5 mr-5 capitalize w-16 h-8 min-h-full text-sm font-semibold text-neutral-500 bg-white border-transparent" + className="btn grid grid-cols-[auto,auto] gap-x-1 mt-5 mr-5 capitalize w-16 h-8 p-0 min-h-full text-sm font-semibold text-neutral-500 bg-white border-transparent" aria-label={`Edit ${title}`} > + <PencilSquareIcon className="h-4 w-4 text-black" /> Edit </button> </div> @@ -41,3 +43,4 @@ export default function TechStackCard({ title, data }: TechStackCardProps) { </div> ); } + From 46f497c2dd7bbd3eab7040a0719eb2d9747378b2 Mon Sep 17 00:00:00 2001 From: Timothy Russo <russotimothy@live.it> Date: Mon, 28 Aug 2023 16:12:06 +0200 Subject: [PATCH 12/22] feat: responsive design for tech conainer --- src/app/TechStack/components/TechStackCard.tsx | 1 - src/app/TechStack/components/TechStackContainer.tsx | 4 ++-- tailwind.config.js | 2 +- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/app/TechStack/components/TechStackCard.tsx b/src/app/TechStack/components/TechStackCard.tsx index 9e72c20b..124ae191 100644 --- a/src/app/TechStack/components/TechStackCard.tsx +++ b/src/app/TechStack/components/TechStackCard.tsx @@ -43,4 +43,3 @@ export default function TechStackCard({ title, data }: TechStackCardProps) { </div> ); } - diff --git a/src/app/TechStack/components/TechStackContainer.tsx b/src/app/TechStack/components/TechStackContainer.tsx index 7a6851ab..dbebad6b 100644 --- a/src/app/TechStack/components/TechStackContainer.tsx +++ b/src/app/TechStack/components/TechStackContainer.tsx @@ -3,8 +3,8 @@ import { TechStackCard } from "."; export default function TechStackContainer() { return ( - <div className="card w-tech-card-container bg-primary p-10"> - <ul className="grid grid-cols-3 gap-y-20"> + <div className="card max-w-tech-card-container bg-primary p-10"> + <ul className="grid lg:grid-cols-2 xl:grid-cols-3 grid-cols-1 gap-y-20 gap-x-16"> {Object.keys(techStack).map((cardType) => ( <li className="mx-auto" key={cardType}> <TechStackCard diff --git a/tailwind.config.js b/tailwind.config.js index 844ea325..996fa638 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,7 +6,7 @@ module.exports = { ], theme: { extend: { - width: { + maxWidth: { "tech-card-container": "85.5625rem", }, }, From 6c7149e30f9d3968aced5fe82eb28da7c3ffae26 Mon Sep 17 00:00:00 2001 From: Timothy Russo <russotimothy@live.it> Date: Mon, 28 Aug 2023 16:21:43 +0200 Subject: [PATCH 13/22] feat: responsive layout for tech card --- src/app/TechStack/components/TechStackCard.tsx | 2 +- src/app/TechStack/components/TechStackContainer.tsx | 4 ++-- src/app/layout.tsx | 1 - 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/app/TechStack/components/TechStackCard.tsx b/src/app/TechStack/components/TechStackCard.tsx index 124ae191..e6bc3d71 100644 --- a/src/app/TechStack/components/TechStackCard.tsx +++ b/src/app/TechStack/components/TechStackCard.tsx @@ -9,7 +9,7 @@ interface TechStackCardProps { export default function TechStackCard({ title, data }: TechStackCardProps) { return ( - <div className="card w-96 text-primary-content bg-neutral-100 rounded-lg"> + <div className="card w-72 sm:w-96 text-primary-content bg-neutral-100 rounded-lg"> <div className="flex flex-row justify-between"> <h3 className="text-xl font-semibold text-neutral-900 mt-5 ml-5 self-center"> {title} diff --git a/src/app/TechStack/components/TechStackContainer.tsx b/src/app/TechStack/components/TechStackContainer.tsx index dbebad6b..2df16bbf 100644 --- a/src/app/TechStack/components/TechStackContainer.tsx +++ b/src/app/TechStack/components/TechStackContainer.tsx @@ -4,9 +4,9 @@ import { TechStackCard } from "."; export default function TechStackContainer() { return ( <div className="card max-w-tech-card-container bg-primary p-10"> - <ul className="grid lg:grid-cols-2 xl:grid-cols-3 grid-cols-1 gap-y-20 gap-x-16"> + <ul className="grid lg:grid-cols-2 xl:grid-cols-3 grid-cols-1 gap-y-20"> {Object.keys(techStack).map((cardType) => ( - <li className="mx-auto" key={cardType}> + <li className="mx-auto xl:mx-none" key={cardType}> <TechStackCard title={cardType} data={techStack[cardType as keyof typeof techStack]} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index c0cca4d2..19afe4df 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -9,7 +9,6 @@ export const metadata: Metadata = { description: "Generated by create next app", }; - // If loading a variable font, you don't need to specify the font weight const inter = Inter({ weight: ["400", "500", "600", "700"], From cc3b23bc681bdff744c6b752c78462b64c21baaa Mon Sep 17 00:00:00 2001 From: Timothy Russo <russotimothy@live.it> Date: Mon, 28 Aug 2023 16:49:06 +0200 Subject: [PATCH 14/22] feat: update gap for tech container --- src/app/TechStack/components/TechStackCard.tsx | 2 +- .../TechStack/components/TechStackContainer.tsx | 15 ++++++++++++--- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/src/app/TechStack/components/TechStackCard.tsx b/src/app/TechStack/components/TechStackCard.tsx index e6bc3d71..3695e6a3 100644 --- a/src/app/TechStack/components/TechStackCard.tsx +++ b/src/app/TechStack/components/TechStackCard.tsx @@ -24,7 +24,7 @@ export default function TechStackCard({ title, data }: TechStackCardProps) { </button> </div> <div className="h-40 overflow-y-auto mx-5 mt-6 mb-5"> - <ul className="text-neutral-900 last:mb-0"> + <ul className="text-neutral-900"> {data.map((element) => ( <li className="text-base mb-5 last:mb-0 relative grid grid-cols-[1fr,auto] items-center" diff --git a/src/app/TechStack/components/TechStackContainer.tsx b/src/app/TechStack/components/TechStackContainer.tsx index 2df16bbf..639b1e39 100644 --- a/src/app/TechStack/components/TechStackContainer.tsx +++ b/src/app/TechStack/components/TechStackContainer.tsx @@ -4,9 +4,18 @@ import { TechStackCard } from "."; export default function TechStackContainer() { return ( <div className="card max-w-tech-card-container bg-primary p-10"> - <ul className="grid lg:grid-cols-2 xl:grid-cols-3 grid-cols-1 gap-y-20"> - {Object.keys(techStack).map((cardType) => ( - <li className="mx-auto xl:mx-none" key={cardType}> + <ul className="grid lg:grid-cols-2 xl:grid-cols-3 grid-cols-1 gap-y-20 justify-items-stretch"> + {Object.keys(techStack).map((cardType, index) => ( + <li + key={cardType} + className={`mx-auto xl:mx-0 ${ + index % 3 === 0 + ? "justify-self-start" + : index % 3 === 1 + ? "justify-self-center" + : "justify-self-end" + }`} + > <TechStackCard title={cardType} data={techStack[cardType as keyof typeof techStack]} From c034ff76dc77bc6385f337949c0d2fda18989dd0 Mon Sep 17 00:00:00 2001 From: Timothy Russo <russotimothy@live.it> Date: Mon, 28 Aug 2023 18:13:14 +0200 Subject: [PATCH 15/22] feat: update colors --- src/app/TechStack/components/TechStackCard.tsx | 2 +- src/app/TechStack/components/TechStackContainer.tsx | 6 +++--- tailwind.config.js | 12 ++++++++++++ 3 files changed, 16 insertions(+), 4 deletions(-) diff --git a/src/app/TechStack/components/TechStackCard.tsx b/src/app/TechStack/components/TechStackCard.tsx index 3695e6a3..ab02d5a5 100644 --- a/src/app/TechStack/components/TechStackCard.tsx +++ b/src/app/TechStack/components/TechStackCard.tsx @@ -9,7 +9,7 @@ interface TechStackCardProps { export default function TechStackCard({ title, data }: TechStackCardProps) { return ( - <div className="card w-72 sm:w-96 text-primary-content bg-neutral-100 rounded-lg"> + <div className="card w-72 sm:w-96 text-primary-content bg-neutral-50 rounded-lg"> <div className="flex flex-row justify-between"> <h3 className="text-xl font-semibold text-neutral-900 mt-5 ml-5 self-center"> {title} diff --git a/src/app/TechStack/components/TechStackContainer.tsx b/src/app/TechStack/components/TechStackContainer.tsx index 639b1e39..c1cd87a0 100644 --- a/src/app/TechStack/components/TechStackContainer.tsx +++ b/src/app/TechStack/components/TechStackContainer.tsx @@ -3,7 +3,7 @@ import { TechStackCard } from "."; export default function TechStackContainer() { return ( - <div className="card max-w-tech-card-container bg-primary p-10"> + <div className="card max-w-tech-card-container bg-primary-100 p-10"> <ul className="grid lg:grid-cols-2 xl:grid-cols-3 grid-cols-1 gap-y-20 justify-items-stretch"> {Object.keys(techStack).map((cardType, index) => ( <li @@ -12,8 +12,8 @@ export default function TechStackContainer() { index % 3 === 0 ? "justify-self-start" : index % 3 === 1 - ? "justify-self-center" - : "justify-self-end" + ? "justify-self-center" + : "justify-self-end" }`} > <TechStackCard diff --git a/tailwind.config.js b/tailwind.config.js index 996fa638..bc006790 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -9,6 +9,18 @@ module.exports = { maxWidth: { "tech-card-container": "85.5625rem", }, + colors: { + "primary-50": "#ecf4f0", + "primary-100": "#c4ded2", + "primary-200": "#a7cdbc", + "primary-300": "#7fb79d", + "primary-400": "#66a98a", + "primary-600": "#3a8663", + "primary-700": "#2d684d", + "primary-800": "#23513c", + "primary-900": "#1b3e2e", + "neutral-50": "#F1F1F1", + }, }, }, daisyui: { From 8cfeca82918e5a0a935ed919654c460332bdd6d7 Mon Sep 17 00:00:00 2001 From: Timothy Russo <russotimothy@live.it> Date: Tue, 29 Aug 2023 08:51:11 +0200 Subject: [PATCH 16/22] feat: index and page files for tech stack --- src/app/TechStack/index.ts | 1 + src/app/TechStack/page.tsx | 5 +++++ 2 files changed, 6 insertions(+) create mode 100644 src/app/TechStack/index.ts create mode 100644 src/app/TechStack/page.tsx diff --git a/src/app/TechStack/index.ts b/src/app/TechStack/index.ts new file mode 100644 index 00000000..6d635c80 --- /dev/null +++ b/src/app/TechStack/index.ts @@ -0,0 +1 @@ +export { default as TechStackContainer } from "./components/TechStackContainer"; diff --git a/src/app/TechStack/page.tsx b/src/app/TechStack/page.tsx new file mode 100644 index 00000000..73b441bc --- /dev/null +++ b/src/app/TechStack/page.tsx @@ -0,0 +1,5 @@ +import { TechStackContainer } from "."; + +export default function TeckStack() { + return <TechStackContainer />; +} From 0d5fd7254da4540849a0768f41fce82ee6cb54d4 Mon Sep 17 00:00:00 2001 From: Timothy Russo <russotimothy@live.it> Date: Tue, 29 Aug 2023 09:07:25 +0200 Subject: [PATCH 17/22] feat: pr review corrections --- .../components/TechStackContainer.module.css | 3 +++ .../components/TechStackContainer.tsx | 3 ++- .../components/fixtures/TechStack.ts | 4 ++-- src/components/Avatar.tsx | 2 +- tailwind.config.js | 20 +------------------ 5 files changed, 9 insertions(+), 23 deletions(-) create mode 100644 src/app/TechStack/components/TechStackContainer.module.css diff --git a/src/app/TechStack/components/TechStackContainer.module.css b/src/app/TechStack/components/TechStackContainer.module.css new file mode 100644 index 00000000..61221827 --- /dev/null +++ b/src/app/TechStack/components/TechStackContainer.module.css @@ -0,0 +1,3 @@ +.tech-container-width { + max-width: 85.5625rem; +} \ No newline at end of file diff --git a/src/app/TechStack/components/TechStackContainer.tsx b/src/app/TechStack/components/TechStackContainer.tsx index c1cd87a0..127bd2f8 100644 --- a/src/app/TechStack/components/TechStackContainer.tsx +++ b/src/app/TechStack/components/TechStackContainer.tsx @@ -1,9 +1,10 @@ import { techStack } from "./fixtures/TechStack"; +import styles from "./TechStackContainer.module.css"; import { TechStackCard } from "."; export default function TechStackContainer() { return ( - <div className="card max-w-tech-card-container bg-primary-100 p-10"> + <div className={`card bg-primary p-10 ${styles["tech-container-width"]}`}> <ul className="grid lg:grid-cols-2 xl:grid-cols-3 grid-cols-1 gap-y-20 justify-items-stretch"> {Object.keys(techStack).map((cardType, index) => ( <li diff --git a/src/app/TechStack/components/fixtures/TechStack.ts b/src/app/TechStack/components/fixtures/TechStack.ts index e48841f9..fe5443a1 100644 --- a/src/app/TechStack/components/fixtures/TechStack.ts +++ b/src/app/TechStack/components/fixtures/TechStack.ts @@ -3,7 +3,7 @@ type CardType = | "CSS Library" | "Backend" | "Project Management" - | "Server-Side" + | "Cloud Provider" | "Hosting"; export interface TechItem { @@ -41,7 +41,7 @@ export const techStack: Record<CardType, TechItem[]> = { { id: 4, value: "Notion", users: ["John"] }, { id: 5, value: "Obsidian", users: ["Jack", "John"] }, ], - "Server-Side": [ + "Cloud Provider": [ { id: 1, value: "AWS", users: ["Tim", "John"] }, { id: 2, value: "Azure", users: ["John"] }, { id: 3, value: "Firebase", users: ["Myke", "Josh", "Jack"] }, diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx index e7ef1fa7..d7078699 100644 --- a/src/components/Avatar.tsx +++ b/src/components/Avatar.tsx @@ -1,6 +1,6 @@ export default function Avatar() { return ( - <div className="avatar bg-neutral-300 rounded-full border-2 border-neutral-100"> + <div className="avatar bg-neutral-300 rounded-full border-2 border-neutral-50"> <div className="w-6"></div> </div> ); diff --git a/tailwind.config.js b/tailwind.config.js index bc006790..335285e0 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -4,25 +4,7 @@ module.exports = { "./src/components/**/*.{js,ts,jsx,tsx,mdx}", "./src/app/**/*.{js,ts,jsx,tsx,mdx}", ], - theme: { - extend: { - maxWidth: { - "tech-card-container": "85.5625rem", - }, - colors: { - "primary-50": "#ecf4f0", - "primary-100": "#c4ded2", - "primary-200": "#a7cdbc", - "primary-300": "#7fb79d", - "primary-400": "#66a98a", - "primary-600": "#3a8663", - "primary-700": "#2d684d", - "primary-800": "#23513c", - "primary-900": "#1b3e2e", - "neutral-50": "#F1F1F1", - }, - }, - }, + theme: {}, daisyui: { themes: [ { From d15e2c689c37eddd0a9b8c30bfd07b02eb9cd4f2 Mon Sep 17 00:00:00 2001 From: Timothy Russo <russotimothy@live.it> Date: Fri, 1 Sep 2023 08:30:00 +0200 Subject: [PATCH 18/22] feat: move cardType in a types folder --- src/app/TechStack/components/fixtures/TechStack.ts | 8 +------- src/app/TechStack/components/types/types.ts | 8 ++++++++ 2 files changed, 9 insertions(+), 7 deletions(-) create mode 100644 src/app/TechStack/components/types/types.ts diff --git a/src/app/TechStack/components/fixtures/TechStack.ts b/src/app/TechStack/components/fixtures/TechStack.ts index fe5443a1..56c216f9 100644 --- a/src/app/TechStack/components/fixtures/TechStack.ts +++ b/src/app/TechStack/components/fixtures/TechStack.ts @@ -1,10 +1,4 @@ -type CardType = - | "Frontend" - | "CSS Library" - | "Backend" - | "Project Management" - | "Cloud Provider" - | "Hosting"; +import { CardType } from "../types/types"; export interface TechItem { id: number; diff --git a/src/app/TechStack/components/types/types.ts b/src/app/TechStack/components/types/types.ts new file mode 100644 index 00000000..08cb6137 --- /dev/null +++ b/src/app/TechStack/components/types/types.ts @@ -0,0 +1,8 @@ +export type CardType = + | "Frontend" + | "CSS Library" + | "Backend" + | "Project Management" + | "Cloud Provider" + | "Hosting"; + From f16fc75f4b7a5682d168c10a491e9e81f2574444 Mon Sep 17 00:00:00 2001 From: Timothy Russo <russotimothy@live.it> Date: Fri, 1 Sep 2023 08:37:10 +0200 Subject: [PATCH 19/22] feat: add EditButton as a reusable component --- src/app/TechStack/components/TechStackCard.tsx | 12 ++---------- src/app/TechStack/components/types/types.ts | 1 - src/components/EditButton.tsx | 18 ++++++++++++++++++ src/components/index.ts | 1 + 4 files changed, 21 insertions(+), 11 deletions(-) create mode 100644 src/components/EditButton.tsx diff --git a/src/app/TechStack/components/TechStackCard.tsx b/src/app/TechStack/components/TechStackCard.tsx index ab02d5a5..07029b22 100644 --- a/src/app/TechStack/components/TechStackCard.tsx +++ b/src/app/TechStack/components/TechStackCard.tsx @@ -1,6 +1,5 @@ -import { PencilSquareIcon } from "@heroicons/react/24/solid"; import { TechItem } from "./fixtures/TechStack"; -import { Avatar } from "@/components"; +import { Avatar, EditButton } from "@/components"; interface TechStackCardProps { title: string; @@ -14,14 +13,7 @@ export default function TechStackCard({ title, data }: TechStackCardProps) { <h3 className="text-xl font-semibold text-neutral-900 mt-5 ml-5 self-center"> {title} </h3> - <button - type="button" - className="btn grid grid-cols-[auto,auto] gap-x-1 mt-5 mr-5 capitalize w-16 h-8 p-0 min-h-full text-sm font-semibold text-neutral-500 bg-white border-transparent" - aria-label={`Edit ${title}`} - > - <PencilSquareIcon className="h-4 w-4 text-black" /> - Edit - </button> + <EditButton title={title} /> </div> <div className="h-40 overflow-y-auto mx-5 mt-6 mb-5"> <ul className="text-neutral-900"> diff --git a/src/app/TechStack/components/types/types.ts b/src/app/TechStack/components/types/types.ts index 08cb6137..23b66261 100644 --- a/src/app/TechStack/components/types/types.ts +++ b/src/app/TechStack/components/types/types.ts @@ -5,4 +5,3 @@ export type CardType = | "Project Management" | "Cloud Provider" | "Hosting"; - diff --git a/src/components/EditButton.tsx b/src/components/EditButton.tsx new file mode 100644 index 00000000..2bcdc862 --- /dev/null +++ b/src/components/EditButton.tsx @@ -0,0 +1,18 @@ +import { PencilSquareIcon } from "@heroicons/react/24/solid"; + +interface EditButtonProps { + title: string; +} + +export default function EditButton({ title }: EditButtonProps) { + return ( + <button + type="button" + className="btn grid grid-cols-[auto,auto] gap-x-1 mt-5 mr-5 capitalize w-16 h-8 p-0 min-h-full text-sm font-semibold text-neutral-500 bg-white border-transparent" + aria-label={`Edit ${title}`} + > + <PencilSquareIcon className="h-4 w-4 text-black" /> + Edit + </button> + ); +} diff --git a/src/components/index.ts b/src/components/index.ts index 39a15b83..2b77dcee 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,2 +1,3 @@ export { default as StoreProvider } from "./StoreProvider"; export { default as Avatar } from "./Avatar"; +export { default as EditButton } from "./EditButton"; From 2771902bc5590fbb3df54d8d635a15c96104fcf9 Mon Sep 17 00:00:00 2001 From: Timothy Russo <russotimothy@live.it> Date: Fri, 1 Sep 2023 18:15:06 +0200 Subject: [PATCH 20/22] fix: naming conventions --- src/app/TechStack/index.ts | 1 - src/app/TechStack/page.tsx | 5 ----- src/app/index.ts | 2 +- .../{TechStack => tech-stack}/components/TechStackCard.tsx | 0 .../components/TechStackContainer.module.css | 0 .../components/TechStackContainer.tsx | 0 .../components/fixtures/TechStack.ts | 0 src/app/{TechStack => tech-stack}/components/index.ts | 0 src/app/{TechStack => tech-stack}/components/types/types.ts | 0 src/app/tech-stack/index.ts | 1 + src/app/tech-stack/page.tsx | 5 +++++ 11 files changed, 7 insertions(+), 7 deletions(-) delete mode 100644 src/app/TechStack/index.ts delete mode 100644 src/app/TechStack/page.tsx rename src/app/{TechStack => tech-stack}/components/TechStackCard.tsx (100%) rename src/app/{TechStack => tech-stack}/components/TechStackContainer.module.css (100%) rename src/app/{TechStack => tech-stack}/components/TechStackContainer.tsx (100%) rename src/app/{TechStack => tech-stack}/components/fixtures/TechStack.ts (100%) rename src/app/{TechStack => tech-stack}/components/index.ts (100%) rename src/app/{TechStack => tech-stack}/components/types/types.ts (100%) create mode 100644 src/app/tech-stack/index.ts create mode 100644 src/app/tech-stack/page.tsx diff --git a/src/app/TechStack/index.ts b/src/app/TechStack/index.ts deleted file mode 100644 index 6d635c80..00000000 --- a/src/app/TechStack/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as TechStackContainer } from "./components/TechStackContainer"; diff --git a/src/app/TechStack/page.tsx b/src/app/TechStack/page.tsx deleted file mode 100644 index 73b441bc..00000000 --- a/src/app/TechStack/page.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { TechStackContainer } from "."; - -export default function TeckStack() { - return <TechStackContainer />; -} diff --git a/src/app/index.ts b/src/app/index.ts index b351a848..b90a9a6b 100644 --- a/src/app/index.ts +++ b/src/app/index.ts @@ -1 +1 @@ -export { default as CounterPage } from "./counter/page"; +export { TeckStackPage } from "./tech-stack/"; diff --git a/src/app/TechStack/components/TechStackCard.tsx b/src/app/tech-stack/components/TechStackCard.tsx similarity index 100% rename from src/app/TechStack/components/TechStackCard.tsx rename to src/app/tech-stack/components/TechStackCard.tsx diff --git a/src/app/TechStack/components/TechStackContainer.module.css b/src/app/tech-stack/components/TechStackContainer.module.css similarity index 100% rename from src/app/TechStack/components/TechStackContainer.module.css rename to src/app/tech-stack/components/TechStackContainer.module.css diff --git a/src/app/TechStack/components/TechStackContainer.tsx b/src/app/tech-stack/components/TechStackContainer.tsx similarity index 100% rename from src/app/TechStack/components/TechStackContainer.tsx rename to src/app/tech-stack/components/TechStackContainer.tsx diff --git a/src/app/TechStack/components/fixtures/TechStack.ts b/src/app/tech-stack/components/fixtures/TechStack.ts similarity index 100% rename from src/app/TechStack/components/fixtures/TechStack.ts rename to src/app/tech-stack/components/fixtures/TechStack.ts diff --git a/src/app/TechStack/components/index.ts b/src/app/tech-stack/components/index.ts similarity index 100% rename from src/app/TechStack/components/index.ts rename to src/app/tech-stack/components/index.ts diff --git a/src/app/TechStack/components/types/types.ts b/src/app/tech-stack/components/types/types.ts similarity index 100% rename from src/app/TechStack/components/types/types.ts rename to src/app/tech-stack/components/types/types.ts diff --git a/src/app/tech-stack/index.ts b/src/app/tech-stack/index.ts new file mode 100644 index 00000000..0adbbb0d --- /dev/null +++ b/src/app/tech-stack/index.ts @@ -0,0 +1 @@ +export { default as TeckStackPage } from "./page"; diff --git a/src/app/tech-stack/page.tsx b/src/app/tech-stack/page.tsx new file mode 100644 index 00000000..1eacd571 --- /dev/null +++ b/src/app/tech-stack/page.tsx @@ -0,0 +1,5 @@ +import { TechStackContainer } from "./components"; + +export default function TeckStackPage() { + return <TechStackContainer />; +} From 78a8e286027dfcd7f99029768193d24584fa40d2 Mon Sep 17 00:00:00 2001 From: Dan Ko <danko56666@gmail.com> Date: Fri, 1 Sep 2023 18:53:34 -0400 Subject: [PATCH 21/22] add colors to daisy ui theme config --- tailwind.config.js | 28 +++++++++++++++++++++++----- 1 file changed, 23 insertions(+), 5 deletions(-) diff --git a/tailwind.config.js b/tailwind.config.js index 335285e0..1bc22080 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -9,12 +9,30 @@ module.exports = { themes: [ { chingu: { - primary: "#40936d", - secondary: "#E6624B", - warning: "#f6d860", - accent: "#37cdbe", + primary: "#40936D", + "primary-focus": "#3A8663", + "primary-content": "#C4DED2", + secondary: "#C2DAE9", + "secondary-focus": "#B1C6D4", + "secondary-content": "#ECF4F8", + accent: "#A7F3D0", + "accent-focus": "#98DDBD", + "accent-content": "#E4FBF0", neutral: "#757575", - "base-100": "#ffffff", + "neutral-focus": "#535353", + "neutral-content": "#919191", + info: "#8FC4E5", + "info-content": "#DCEDF7", + success: "#14B8A6", + "success-content": "#B6E9E3", + warning: "#FFAC0C", + "warning-content": "#FFE5B4", + error: "#E6624B", + "error-content": "#F7CEC7", + "base-100": "#D4D4D4", + "base-200": "#C0C0C0", + "base-300": "#A3A3A3", + "base-content": "#F1F1F1", }, }, ], From e8281e779418ba15a709fa3602de394b211c0bda Mon Sep 17 00:00:00 2001 From: Timothy Russo <russotimothy@live.it> Date: Tue, 5 Sep 2023 09:06:23 +0200 Subject: [PATCH 22/22] feat: update colors --- src/app/tech-stack/components/TechStackCard.tsx | 6 +++--- src/app/tech-stack/components/TechStackContainer.tsx | 2 +- src/components/Avatar.tsx | 2 +- src/components/EditButton.tsx | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/app/tech-stack/components/TechStackCard.tsx b/src/app/tech-stack/components/TechStackCard.tsx index 07029b22..2b1c33a9 100644 --- a/src/app/tech-stack/components/TechStackCard.tsx +++ b/src/app/tech-stack/components/TechStackCard.tsx @@ -8,15 +8,15 @@ interface TechStackCardProps { export default function TechStackCard({ title, data }: TechStackCardProps) { return ( - <div className="card w-72 sm:w-96 text-primary-content bg-neutral-50 rounded-lg"> + <div className="card w-72 sm:w-96 text-black bg-white rounded-lg"> <div className="flex flex-row justify-between"> - <h3 className="text-xl font-semibold text-neutral-900 mt-5 ml-5 self-center"> + <h3 className="text-xl font-semibold text-black mt-5 ml-5 self-center"> {title} </h3> <EditButton title={title} /> </div> <div className="h-40 overflow-y-auto mx-5 mt-6 mb-5"> - <ul className="text-neutral-900"> + <ul className="text-black"> {data.map((element) => ( <li className="text-base mb-5 last:mb-0 relative grid grid-cols-[1fr,auto] items-center" diff --git a/src/app/tech-stack/components/TechStackContainer.tsx b/src/app/tech-stack/components/TechStackContainer.tsx index 127bd2f8..97e0e6d6 100644 --- a/src/app/tech-stack/components/TechStackContainer.tsx +++ b/src/app/tech-stack/components/TechStackContainer.tsx @@ -4,7 +4,7 @@ import { TechStackCard } from "."; export default function TechStackContainer() { return ( - <div className={`card bg-primary p-10 ${styles["tech-container-width"]}`}> + <div className={`card bg-primary-content p-10 ${styles["tech-container-width"]}`}> <ul className="grid lg:grid-cols-2 xl:grid-cols-3 grid-cols-1 gap-y-20 justify-items-stretch"> {Object.keys(techStack).map((cardType, index) => ( <li diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx index d7078699..f12304ba 100644 --- a/src/components/Avatar.tsx +++ b/src/components/Avatar.tsx @@ -1,6 +1,6 @@ export default function Avatar() { return ( - <div className="avatar bg-neutral-300 rounded-full border-2 border-neutral-50"> + <div className="avatar bg-neutral-300 rounded-full border border-base-content"> <div className="w-6"></div> </div> ); diff --git a/src/components/EditButton.tsx b/src/components/EditButton.tsx index 2bcdc862..94885b63 100644 --- a/src/components/EditButton.tsx +++ b/src/components/EditButton.tsx @@ -8,7 +8,7 @@ export default function EditButton({ title }: EditButtonProps) { return ( <button type="button" - className="btn grid grid-cols-[auto,auto] gap-x-1 mt-5 mr-5 capitalize w-16 h-8 p-0 min-h-full text-sm font-semibold text-neutral-500 bg-white border-transparent" + className="btn grid grid-cols-[auto,auto] gap-x-1 mt-5 mr-5 capitalize w-16 h-8 p-0 min-h-full text-sm font-semibold text-black bg-secondary border-transparent" aria-label={`Edit ${title}`} > <PencilSquareIcon className="h-4 w-4 text-black" />