Task 20 event tag desktop

src/assets/css/events/EventTag.module.css

@@ -0,0 +1,27 @@
+.container {
+  display: flex;
+  margin: 5px;
+  padding: 5px;
+  border-radius: 10px;
+}
+
+.container:hover {
+  cursor: pointer;
+}
+
+.font {
+  font-family: "DM Sans";
+  font-size: 10px;
+  font-style: normal;
+  font-weight: bold;
+  line-height: normal;
+}
+
+.fontBlack {
+  color: #151515;
+
+}
+
+.fontWhite {
+  color: #ffffff;
+}

src/components/constants.tsx

@@ -6,3 +6,13 @@ export const BREAKPOINTS = {
   XL: 1200,
   XXL: 1400
 }
+
+export const EVENT_TAG_COLORS = {
+  SD: '#528EE8',
+  ML: '#8BCA80',
+  BC: '#EA5959',
+  Q: '#C179B9',
+  IA: '#7DCACF',
+  ER: '#FDCE55',
+  PC: '#0C1747',
+}

src/components/events/EventTag.tsx

@@ -0,0 +1,29 @@
+import styles from "css/events/EventTag.module.css";
+import { EVENT_TAG_COLORS } from "../constants";
+
+interface EventTagProps {
+  name: string;
+  datetime: Date;
+  backgroundColor: string;
+}
+
+const EventTag = ({
+  name,
+  backgroundColor,
+}: EventTagProps) => {
+  return (
+    <div className={`${styles.container} ${styles.font}`} style={{ backgroundColor }}>
+      <span
+        className={
+          backgroundColor == EVENT_TAG_COLORS.PC
+            ? styles.fontWhite
+            : styles.fontBlack
+        }
+      >
+        {name}
+      </span>
+    </div>
+  );
+};
+
+export default EventTag;

src/main.tsx

@@ -28,4 +28,4 @@ enableMocking().then(() => {
       </QueryClientProvider>
     </React.StrictMode>,
   )
-})
+})

src/routes/events/EventPage.tsx

@@ -0,0 +1,18 @@
+import { EVENT_TAG_COLORS } from "@/components/constants";
+import EventTag from "@/components/events/EventTag";
+
+function EventPage() {
+  return (
+    <>
+        <EventTag name={'Event Test 1 - Software Development'} datetime={new Date()} backgroundColor={EVENT_TAG_COLORS.SD} />
+        <EventTag name={'Event Test 2 - Machine Learning'} datetime={new Date()} backgroundColor={EVENT_TAG_COLORS.ML} />
+        <EventTag name={'Event Test 3 - Blockchain'} datetime={new Date()} backgroundColor={EVENT_TAG_COLORS.BC} />
+        <EventTag name={'Event Test 4 - Quant'} datetime={new Date()} backgroundColor={EVENT_TAG_COLORS.Q} />
+        <EventTag name={'Event Test 5 - Internal Affairs'} datetime={new Date()} backgroundColor={EVENT_TAG_COLORS.IA} />
+        <EventTag name={'Event Test 6 - External Relations'} datetime={new Date()} backgroundColor={EVENT_TAG_COLORS.ER} />
+        <EventTag name={'Event Test 7 - Presidential Cell'} datetime={new Date()} backgroundColor={EVENT_TAG_COLORS.PC} />
+    </>
+  )
+}
+
+export default EventPage

src/routes/router.tsx

@@ -1,6 +1,7 @@
 import { createBrowserRouter } from "react-router-dom";
 import TestPage from "./shared/TestPage.tsx";
 import App from "./App.tsx"
+import EventPage from "./events/EventPage.tsx";
 
 
 const router = createBrowserRouter([
@@ -11,6 +12,10 @@ const router = createBrowserRouter([
   {
     path: "/test",
     Component: TestPage,
+  },
+  {
+    path: "/events",
+    Component: EventPage,
   }
 ])