From 5bab960af80fc9b197b07ed9fd3cb983109d799a Mon Sep 17 00:00:00 2001
From: Sammers21 <titantins@gmail.com>
Date: Mon, 26 Feb 2024 17:27:02 +0300
Subject: [PATCH] releasef chips layout

---
 .../src/containers/Profile/Alts/SpecChip.tsx  | 34 +++++++++++--------
 frontend/src/containers/Profile/ObsWidget.tsx | 24 +++++++++----
 2 files changed, 37 insertions(+), 21 deletions(-)

diff --git a/frontend/src/containers/Profile/Alts/SpecChip.tsx b/frontend/src/containers/Profile/Alts/SpecChip.tsx
index ce8b5306..7970ceb7 100644
--- 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
index c3703185..5dd0704e 100644
--- 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>
   );