Feature/cgd 36

src/app/feature/components/TechStackCard.tsx → 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) {

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>
+  );
+}

src/app/feature/components/fixtures/TechStackCard.ts → 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"] },

src/app/TechStack/components/index.ts

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

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")],
 };