feat: changed info to icons

wzarek · Jun 21, 2024 · e9ef795 · e9ef795
1 parent e7e48fe
commit e9ef795
Show file tree

Hide file tree

Showing 6 changed files with 180 additions and 6 deletions.
diff --git a/Client/reasn-client/apps/web/app/events/[slug]/page.tsx b/Client/reasn-client/apps/web/app/events/[slug]/page.tsx
@@ -4,6 +4,12 @@ import { MOCK_IMG_URL } from "@reasn/ui/src/components/shared/Card";
 import { ButtonBase } from "@reasn/ui/src/components/shared/form";
 import { Comment } from "@reasn/ui/src/components/shared/Comment";
 import { useEffect, useRef, useState } from "react";
+import {
+  Clock,
+  Location,
+  QuestionCircle,
+  TickCircle,
+} from "@reasn/ui/src/icons";
 
 const IMAGES = [
   "https://images.pexels.com/photos/19012544/pexels-photo-19012544/free-photo-of-storm.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
@@ -138,12 +144,24 @@ const EventPage = ({ params }: { params: { slug: string } }) => {
             nam.
           </h1>
           <div className="mt-8 flex h-full flex-col gap-1 font-thin">
-            <p>czas: 12 grudnia 2024r. 12:00 - 13 grudnia 2024r. 23:48</p>
-            <p>adres: Wrocław, C-16 Politechnika Wrocławska, Polska</p>
-            <p className="space-x-5">
-              <span>biorący udział: 20</span>
-              <span>zainteresowani: 200</span>
-            </p>
+            <div className="flex flex-row items-center gap-2">
+              <Clock className="h-5 w-5 fill-slate-400" />
+              <p>12 grudnia 2024r. 12:00 - 13 grudnia 2024r. 23:48</p>
+            </div>
+            <div className="flex flex-row items-center gap-2">
+              <Location className="h-5 w-5 fill-slate-400" />
+              <p>Wrocław, C-16 Politechnika Wrocławska, Polska</p>
+            </div>
+            <div className="flex flex-row gap-5">
+              <div className="flex flex-row items-center gap-2">
+                <QuestionCircle className="h-5 w-5 fill-orange-400" />
+                <span>60 zainteresowanych</span>
+              </div>
+              <div className="flex flex-row items-center gap-2">
+                <TickCircle className="h-5 w-5 fill-green-400" />
+                <span>20 bierze udział</span>
+              </div>
+            </div>
             <div className="mt-5">
               <h3 className="mb-1 font-semibold">Dodatkowe informacje:</h3>
               <div className="ml-5 flex flex-col gap-1">

diff --git a/Client/reasn-client/packages/ui/src/icons/Clock.tsx b/Client/reasn-client/packages/ui/src/icons/Clock.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+
+export const Clock = (props: IconProps) => {
+  const { className, colors, gradientTransform } = props;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      className={className}
+      viewBox="0 0 24 24"
+      fill="url(#gradient1)"
+    >
+      <defs>
+        <linearGradient
+          id="gradient1"
+          x1="0%"
+          y1="0%"
+          x2="100%"
+          y2="0%"
+          gradientTransform={gradientTransform}
+        >
+          {colors?.map((color, index) => (
+            <stop
+              key={index}
+              offset={`${
+                index + 1 < colors.length ? index * (100 / colors.length) : 100
+              }%`}
+              style={{ stopColor: color, stopOpacity: 1 }}
+            />
+          ))}
+        </linearGradient>
+      </defs>
+      <path d="M15.25 13.5h-4a.75.75 0 0 1-.75-.75v-6a.75.75 0 0 1 1.5 0V12h3.25a.75.75 0 0 1 0 1.5ZM12 2C6.478 2 2 6.478 2 12s4.478 10 10 10 10-4.478 10-10S17.522 2 12 2Z" />
+    </svg>
+  );
+};
diff --git a/Client/reasn-client/packages/ui/src/icons/Location.tsx b/Client/reasn-client/packages/ui/src/icons/Location.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+
+export const Location = (props: IconProps) => {
+  const { className, colors, gradientTransform } = props;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      className={className}
+      viewBox="0 0 24 24"
+      fill="url(#gradient1)"
+    >
+      <defs>
+        <linearGradient
+          id="gradient1"
+          x1="0%"
+          y1="0%"
+          x2="100%"
+          y2="0%"
+          gradientTransform={gradientTransform}
+        >
+          {colors?.map((color, index) => (
+            <stop
+              key={index}
+              offset={`${
+                index + 1 < colors.length ? index * (100 / colors.length) : 100
+              }%`}
+              style={{ stopColor: color, stopOpacity: 1 }}
+            />
+          ))}
+        </linearGradient>
+      </defs>
+      <path d="m18.157 16.882-1.187 1.174c-.875.858-2.01 1.962-3.406 3.312a2.25 2.25 0 0 1-3.128 0l-3.491-3.396c-.439-.431-.806-.794-1.102-1.09a8.707 8.707 0 1 1 12.314 0ZM14.5 11a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z" />
+    </svg>
+  );
+};
diff --git a/Client/reasn-client/packages/ui/src/icons/QuestionCircle.tsx b/Client/reasn-client/packages/ui/src/icons/QuestionCircle.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+
+export const QuestionCircle = (props: IconProps) => {
+  const { className, colors, gradientTransform } = props;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      className={className}
+      viewBox="0 0 24 24"
+      fill="url(#gradient1)"
+    >
+      <defs>
+        <linearGradient
+          id="gradient1"
+          x1="0%"
+          y1="0%"
+          x2="100%"
+          y2="0%"
+          gradientTransform={gradientTransform}
+        >
+          {colors?.map((color, index) => (
+            <stop
+              key={index}
+              offset={`${
+                index + 1 < colors.length ? index * (100 / colors.length) : 100
+              }%`}
+              style={{ stopColor: color, stopOpacity: 1 }}
+            />
+          ))}
+        </linearGradient>
+      </defs>
+      <path d="M12 2c5.523 0 10 4.478 10 10s-4.477 10-10 10S2 17.522 2 12 6.477 2 12 2Zm0 13.5a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm0-8.75A2.75 2.75 0 0 0 9.25 9.5a.75.75 0 0 0 1.493.102l.007-.102a1.25 1.25 0 1 1 2.5 0c0 .539-.135.805-.645 1.332l-.135.138c-.878.878-1.22 1.447-1.22 2.53a.75.75 0 0 0 1.5 0c0-.539.135-.805.645-1.332l.135-.138c.878-.878 1.22-1.447 1.22-2.53A2.75 2.75 0 0 0 12 6.75Z" />
+    </svg>
+  );
+};
diff --git a/Client/reasn-client/packages/ui/src/icons/TickCircle.tsx b/Client/reasn-client/packages/ui/src/icons/TickCircle.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+
+export const TickCircle = (props: IconProps) => {
+  const { className, colors, gradientTransform } = props;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      className={className}
+      viewBox="0 0 24 24"
+      fill="url(#gradient1)"
+    >
+      <defs>
+        <linearGradient
+          id="gradient1"
+          x1="0%"
+          y1="0%"
+          x2="100%"
+          y2="0%"
+          gradientTransform={gradientTransform}
+        >
+          {colors?.map((color, index) => (
+            <stop
+              key={index}
+              offset={`${
+                index + 1 < colors.length ? index * (100 / colors.length) : 100
+              }%`}
+              style={{ stopColor: color, stopOpacity: 1 }}
+            />
+          ))}
+        </linearGradient>
+      </defs>
+      <path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm3.22 6.97-4.47 4.47-1.97-1.97a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1.06 0l5-5a.75.75 0 1 0-1.06-1.06Z" />
+    </svg>
+  );
+};
diff --git a/Client/reasn-client/packages/ui/src/icons/index.tsx b/Client/reasn-client/packages/ui/src/icons/index.tsx
@@ -1 +1,5 @@
 export { Fire } from "./Fire";
+export { Clock } from "./Clock";
+export { Location } from "./Location";
+export { QuestionCircle } from "./QuestionCircle";
+export { TickCircle } from "./TickCircle";