Feature/cgd 36

src/app/TechStack/components/TechStackCard.tsx

@@ -0,0 +1,43 @@
+import { TechItem } from "./fixtures/TechStack";
+import { Avatar } from "@/components";
+
+interface TechStackCardProps {
+  title: string;
+  data: TechItem[];
+}
+
+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">
+        <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 mx-5 mt-6 mb-5">
+        <ul className="text-neutral-900 last:mb-0">
+          {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/TechStack/components/TechStackContainer.tsx

@@ -0,0 +1,16 @@
+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">
+      {Object.keys(techStack).map((cardType) => (
+          <li className="mx-auto" key={cardType}>
+            <TechStackCard title={cardType} data={techStack[cardType as keyof typeof techStack]} />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

src/app/TechStack/components/fixtures/TechStack.ts

@@ -0,0 +1,58 @@
+type CardType = 
+  | "Frontend"
+  | "CSS Library"
+  | "Backend"
+  | "Project Management"
+  | "Server-Side"
+  | "Hosting";
+
+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"] },
+  ],
+};

src/app/TechStack/components/index.ts

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

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/components/Avatar.tsx

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

src/components/index.ts

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

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: [
       {