Reorganised Maplist and Sidebar

1 files changed, 60 insertions, 0 deletions

diff --git a/frontend/src/pages/Maplist/Components/Map.tsx b/frontend/src/pages/Maplist/Components/Map.tsx
new file mode 100644
index 0000000..5451830
--- /dev/null
+++ b/frontend/src/pages/Maplist/Components/Map.tsx
@@ -0,0 +1,60 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import type { Map } from "@customTypes/Map";
+
+interface MapProps {
+    map: Map;
+    catNum: number;
+};
+
+const Map: React.FC<MapProps> = ({ map, catNum }) => {
+    return (
+
+        <div className="bg-panel rounded-3xl overflow-hidden">
+            <Link to={`/maps/${map.id}`}>
+                <span className="text-center text-base sm:text-xl w-full block my-1.5 text-foreground truncate">
+                    {map.name}
+                </span>
+                <div
+                    className="flex h-40 sm:h-48 bg-cover relative"
+                    style={{ backgroundImage: `url(${map.image})` }}
+                >
+                    <div className="backdrop-blur-sm w-full flex items-center justify-center">
+                        <span className="text-3xl sm:text-5xl font-barlow-semicondensed-semibold text-white mr-1.5">
+                            {map.is_disabled
+                                ? map.category_portals[0].portal_count
+                                : map.category_portals.find(
+                                    obj => obj.category.id === catNum + 1
+                                )?.portal_count}
+                        </span>
+                        <span className="text-2xl sm:text-4xl font-barlow-semicondensed-regular text-white">
+                            portals
+                        </span>
+                    </div>
+                </div>
+
+                <div className="flex mx-5 my-4">
+                    <div className="flex w-full items-center justify-center gap-1.5 rounded-[2000px] ml-0.5 translate-y-px">
+                        {[1, 2, 3, 4, 5].map((point) => (
+                            <div
+                                key={point}
+                                className={`flex h-[3px] w-full rounded-3xl ${point <= (map.difficulty + 1)
+                                    ? map.difficulty === 0
+                                        ? "bg-green-500"
+                                        : map.difficulty === 1 || map.difficulty === 2
+                                            ? "bg-lime-500"
+                                            : map.difficulty === 3
+                                                ? "bg-red-400"
+                                                : "bg-red-600"
+                                    : "bg-block"
+                                    }`}
+                            />
+                        ))}
+                    </div>
+                </div>
+            </Link>
+        </div>
+    );
+};
+
+export default Map;