Feature/cgd 36

src/app/TechStack/components/TechStackCard.tsx

@@ -0,0 +1,45 @@
+import { PencilSquareIcon } from "@heroicons/react/24/solid";
+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-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}
+        </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>
+      </div>
+      <div className="h-40 overflow-y-auto mx-5 mt-6 mb-5">
+        <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"
+              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,28 @@
+import { techStack } from "./fixtures/TechStack";
+import { TechStackCard } from ".";
+
+export default function TechStackContainer() {
+  return (
+    <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
+            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/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/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/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,25 @@ module.exports = {
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
-  theme: {},
+  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",
+      },
+    },
+  },
   daisyui: {
     themes: [
       {