releasef chips layout

Sammers21 · Feb 26, 2024 · 5bab960 · 5bab960
1 parent 11847de
commit 5bab960
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 21 deletions.
diff --git a/frontend/src/containers/Profile/Alts/SpecChip.tsx b/frontend/src/containers/Profile/Alts/SpecChip.tsx
@@ -2,17 +2,23 @@ import { IPlayerBracket } from "@/types";
 import { bracketToColor, getSpecIcon } from "@/utils/table";
 import { Avatar, Chip } from "@mui/material";
 
-
-
-export const SpecChip = (alt, spec, bracket: Partial<IPlayerBracket>) => {
-    const specIcon = getSpecIcon(`${spec} ${alt.class}` || '');
-    const ratingColor = bracketToColor(bracket);
-    return (
-        <Chip
-            avatar={<Avatar alt="class" src={specIcon} />}
-            label={bracket?.rating}
-            variant="outlined"
-            style={{ color: ratingColor, borderColor: ratingColor }}
-        />
-    );
-}
+export const SpecChip = ({
+  fullSpec,
+  bracket,
+  label,
+}: {
+  fullSpec: string;
+  bracket: Partial<IPlayerBracket>;
+  label: string;
+}) => {
+  const specIcon = getSpecIcon(`${fullSpec}` || "");
+  const ratingColor = bracketToColor(bracket);
+  return (
+    <Chip
+      avatar={<Avatar alt="class" src={specIcon} />}
+      label={label}
+      variant="outlined"
+      style={{ color: ratingColor, borderColor: ratingColor }}
+    />
+  );
+};
diff --git a/frontend/src/containers/Profile/ObsWidget.tsx b/frontend/src/containers/Profile/ObsWidget.tsx
@@ -6,6 +6,7 @@ import { useParams, useSearchParams } from "react-router-dom";
 import { baseUrl } from "@/config";
 import { groupBy } from "lodash";
 import { DPS_SPECS, HEAL_SPECS } from "@/constants/filterSchema";
+import { SpecChip } from "./Alts/SpecChip";
 
 function getSearchParamOrDefault(
   searchParams: URLSearchParams,
@@ -73,7 +74,8 @@ export const ObsWidget = () => {
     })
     .sort((a, b) => {
       return b.rating - a.rating;
-    }).filter((spec )=> {
+    })
+    .filter((spec) => {
       if (role === "healer") {
         return HEAL_SPECS.includes(spec.full_spec);
       } else if (role === "dps") {
@@ -100,16 +102,24 @@ export const ObsWidget = () => {
         </Typography>
       );
     });
-  } else {
-    contentList = [];
+  } else if (style === "chips-ranks") {
+    contentList = specAndMaxShuffle?.map((alt) => {
+      return (
+        <div>
+          <SpecChip
+            fullSpec={alt.full_spec}
+            bracket={alt.bracket}
+            label={`#` + alt.rank}
+          />
+        </div>
+      );
+    });
   }
 
   return (
     <div>
-      <Typography variant="body1">
-        data from PVPQ.NET
-      </Typography>
-      <br/>
+      <Typography variant="h6">PVPQ.NET</Typography>
+      <br />
       <div className={`flex ${flex} gap-1`}>{contentList}</div>
     </div>
   );