Merge pull request #2 from whatever-mentoring/feature/design-system-c…

…omponents

Feature/design system components

craco.config.js

@@ -0,0 +1,14 @@
+const { CracoAliasPlugin } = require("react-app-alias");
+
+module.exports = {
+    plugins: [
+        {
+            plugin: CracoAliasPlugin,
+            options: {
+                source: "tsconfig",
+                baseUrl: ".",
+                tsConfigPath: "./tsconfig.paths.json",
+            },
+        },
+    ],
+};

custom.d.ts

@@ -0,0 +1,3 @@
+declare module '*.woff2';
+declare module '*.png';
+declare module '*.svg';

package.json

@@ -3,13 +3,16 @@
     "version": "0.1.0",
     "private": true,
     "dependencies": {
+        "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+        "@craco/craco": "^7.1.0",
         "@testing-library/jest-dom": "^5.14.1",
         "@testing-library/react": "^13.0.0",
         "@testing-library/user-event": "^13.2.1",
         "@types/node": "^20.5.9",
         "@types/react": "^18.2.21",
         "@types/react-dom": "^18.2.7",
         "@types/styled-components": "^5.1.26",
+        "polished": "^4.2.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-scripts": "5.0.1",
@@ -18,10 +21,10 @@
         "web-vitals": "^2.1.0"
     },
     "scripts": {
-        "start": "react-scripts start",
-        "build": "react-scripts build",
-        "test": "react-scripts test",
-        "eject": "react-scripts eject"
+        "start": "craco start",
+        "build": "craco build",
+        "test": "craco test",
+        "eject": "craco eject"
     },
     "eslintConfig": {
         "extends": [
@@ -42,6 +45,7 @@
         ]
     },
     "devDependencies": {
+        "react-app-alias": "^2.2.2",
         "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
     }
 }

src/App.tsx

@@ -1,12 +1,7 @@
-import DesignTest from "DesignTest";
 import React from "react";
 
 function App() {
-    return (
-        <div>
-            <DesignTest />
-        </div>
-    );
+    return <div></div>;
 }
 
 export default App;

src/components/Category.tsx

@@ -0,0 +1,47 @@
+import styled from 'styled-components';
+import { Palette } from 'styles/Palette';
+import Typo from 'styles/Typo';
+
+interface propsType {
+  id: number;
+  name: string;
+  selected: boolean;
+  onClick: (id: number) => void;
+}
+interface containerProps {
+  selected: boolean;
+}
+
+const Category = ({ id, name, selected, onClick }: propsType) => {
+  return (
+    <Container selected={selected} onClick={() => onClick(id)}>
+      <Typo.b3>{name}</Typo.b3>
+    </Container>
+  );
+};
+
+export default Category;
+
+const Container = styled.div<containerProps>`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+
+  padding: 3px 10px;
+
+  border-radius: 30px;
+  cursor: pointer;
+
+  ${(props) =>
+    props.selected
+      ? `
+        border : 1.5px solid  ${Palette.Main};
+        background: ${Palette.Main15};
+        color : ${Palette.Main};
+    `
+      : `
+        border : 0.75px solid ${Palette.Black};
+        background: ${Palette.White};
+        color : ${Palette.Black};
+    `};
+`;