#9 feat : person, time counter module

front/src/components/party/PersonCounter.tsx

@@ -0,0 +1,20 @@
+import Typography from "@mui/joy/Typography";
+import Person from "@mui/icons-material/Person";
+
+type NumberOfPerson = { current: number; max: number };
+
+const PersonCounter = (num: NumberOfPerson) => {
+  return (
+    <div style={{ display: "flex", flexDirection: "row", gap: 5 }}>
+      <Person fontSize="small" />
+      <Typography
+        level="body3"
+        sx={{ fontWeight: "md", color: "text.secondary" }}
+      >
+        {num.current} / {num.max}
+      </Typography>
+    </div>
+  );
+};
+
+export default PersonCounter;

front/src/components/party/TimeCounter.tsx

@@ -0,0 +1,21 @@
+import Typography from "@mui/joy/Typography";
+import AccessTimeIcon from "@mui/icons-material/AccessTime";
+import format from "date-fns/format";
+
+type DueDate = { dueDate: Date };
+
+const TimeCounter = (date: DueDate) => {
+  return (
+    <div style={{ display: "flex", flexDirection: "row", gap: 5 }}>
+      <AccessTimeIcon fontSize="small" />
+      <Typography
+        level="body3"
+        sx={{ fontWeight: "md", color: "text.secondary" }}
+      >
+        ~ {format(date.dueDate, "MM-dd eee HH:mm")}
+      </Typography>
+    </div>
+  );
+};
+
+export default TimeCounter;