Feature/cgd 36

src/app/globals.css

@@ -1,3 +1,22 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+
+::-webkit-scrollbar {
+    width: 4px;
+}
+
+::-webkit-scrollbar-track {
+    background: #919191;
+    border-radius: 2px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #C0C0C0;
+    border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #C0C0C0;
+}

src/app/index.ts

@@ -1 +1 @@
-export { default as CounterPage } from "./counter/page";
+export { TeckStackPage } from "./tech-stack/";

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"],

src/app/tech-stack/components/TechStackCard.tsx

@@ -0,0 +1,37 @@
+import { TechItem } from "./fixtures/TechStack";
+import { Avatar, EditButton } from "@/components";
+
+interface TechStackCardProps {
+  title: string;
+  data: TechItem[];
+}
+
+export default function TechStackCard({ title, data }: TechStackCardProps) {
+  return (
+    <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-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-black">
+          {data.map((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>
+      </div>
+    </div>
+  );
+}

src/app/tech-stack/components/TechStackContainer.module.css

@@ -0,0 +1,3 @@
+.tech-container-width {
+    max-width: 85.5625rem;
+}

src/app/tech-stack/components/TechStackContainer.tsx

@@ -0,0 +1,29 @@
+import { techStack } from "./fixtures/TechStack";
+import styles from "./TechStackContainer.module.css";
+import { TechStackCard } from ".";
+
+export default function TechStackContainer() {
+  return (
+    <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
+            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]}
+            />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

src/app/tech-stack/components/fixtures/TechStack.ts

@@ -0,0 +1,52 @@
+import { CardType } from "../types/types";
+
+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"] },
+  ],
+  "Cloud Provider": [
+    { 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"] },
+  ],
+};

src/app/tech-stack/components/index.ts

@@ -0,0 +1,2 @@
+export { default as TechStackCard } from "./TechStackCard";
+export { default as TechStackContainer } from "./TechStackContainer";

src/app/tech-stack/components/types/types.ts

@@ -0,0 +1,7 @@
+export type CardType =
+  | "Frontend"
+  | "CSS Library"
+  | "Backend"
+  | "Project Management"
+  | "Cloud Provider"
+  | "Hosting";

src/app/tech-stack/index.ts

@@ -0,0 +1 @@
+export { default as TeckStackPage } from "./page";

src/app/tech-stack/page.tsx

@@ -0,0 +1,5 @@
+import { TechStackContainer } from "./components";
+
+export default function TeckStackPage() {
+  return <TechStackContainer />;
+}

src/components/Avatar.tsx

@@ -0,0 +1,7 @@
+export default function Avatar() {
+  return (
+    <div className="avatar bg-neutral-300 rounded-full border border-base-content">
+      <div className="w-6"></div>
+    </div>
+  );
+}

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-black bg-secondary border-transparent"
+      aria-label={`Edit ${title}`}
+    >
+      <PencilSquareIcon className="h-4 w-4 text-black" />
+      Edit
+    </button>
+  );
+}

src/components/index.ts

@@ -1 +1,3 @@
 export { default as StoreProvider } from "./StoreProvider";
+export { default as Avatar } from "./Avatar";
+export { default as EditButton } from "./EditButton";