:grugdev: Tierlist page (#60)

* add tierlist route page

* add basic tierlist page and data

* power by json

* mobile tier list

* styling

* cleanup

* trunk upgrade, add tierlist to nav

.trunk/trunk.yaml

@@ -2,32 +2,32 @@
 # To learn more about the format of this file, see https://docs.trunk.io/reference/trunk-yaml
 version: 0.1
 cli:
-  version: 1.22.6
+  version: 1.22.8
 # Trunk provides extensibility via plugins. (https://docs.trunk.io/plugins)
 plugins:
   sources:
     - id: trunk
-      ref: v1.6.3
+      ref: v1.6.6
       uri: https://github.com/trunk-io/plugins
 # Many linters and tools depend on runtimes - configure them here. (https://docs.trunk.io/runtimes)
 runtimes:
   enabled:
-    - node@18.12.1
+    - node@18.20.5
     - [email protected]
 # This is the section where you manage your linters. (https://docs.trunk.io/check/configuration)
 lint:
   enabled:
-    - [email protected].256
+    - [email protected].344
     - [email protected]
     - [email protected]
     - git-diff-check
-    - markdownlint@0.42.0
-    - [email protected].0
-    - [email protected].2
-    - prettier@3.3.3
+    - markdownlint@0.43.0
+    - [email protected].2
+    - [email protected].3
+    - prettier@3.4.2
     - [email protected]
-    - trivy@0.55.2
-    - trufflehog@3.82.6
+    - trivy@0.58.1
+    - trufflehog@3.88.0
     - [email protected]
 actions:
   enabled:

app/tierlist/page.tsx

@@ -0,0 +1,28 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Sections } from "@/lib/tierlist";
+import { TierlistSection } from "@/components/TierlistSection";
+import MobileTierlist from "@/components/MobileTierlist";
+
+export default async function TierlistPage() {
+  return (
+    <div className="container sm:container prose prose-invert">
+      <Tabs defaultValue="overall" className="hidden sm:block">
+        <TabsList>
+          {Object.values(Sections).map((x) => (
+            <>
+              <TabsTrigger value={x.value}>{x.name}</TabsTrigger>
+            </>
+          ))}
+        </TabsList>
+        {Object.values(Sections).map((x) => (
+          <>
+            <TabsContent value={x.value}>
+              <TierlistSection title={x.name} tiers={x.data} />
+            </TabsContent>
+          </>
+        ))}
+      </Tabs>
+      <MobileTierlist />
+    </div>
+  );
+}

components/MobileTierlist.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from "@/components/ui/select";
+import { Sections } from "@/lib/tierlist";
+import { useState } from "react";
+import { TierlistSection } from "./TierlistSection";
+
+export default function MobileTierlist() {
+  const [section, setSection] = useState<string>("overall");
+
+  return (
+    <>
+      <Select defaultValue="overall" onValueChange={setSection}>
+        <SelectTrigger className="sm:hidden">
+          <SelectValue placeholder="Overall" />
+        </SelectTrigger>
+        <SelectContent>
+          {Object.values(Sections).map((x) => (
+            <>
+              <SelectItem value={x.value}>{x.name}</SelectItem>
+            </>
+          ))}
+        </SelectContent>
+      </Select>
+      <div className="sm:hidden">
+        <TierlistSection
+          title={Sections[section].name}
+          tiers={Sections[section].data}
+          hideTitle
+        />
+      </div>
+    </>
+  );
+}

components/Navbar.tsx

@@ -66,6 +66,15 @@ function Links({ pathname }: { pathname: string }) {
     >
       Codes
     </Link>,
+    <Link
+      href={RelativePageURLs.tierlist}
+      className={buttonVariants({
+        variant: pathname === RelativePageURLs.about ? "secondary" : "link",
+      })}
+      key="tierlist"
+    >
+      Tierlist
+    </Link>,
     <Link
       href={RelativePageURLs.about}
       className={buttonVariants({

components/TierlistSection.tsx

@@ -0,0 +1,39 @@
+import { type SectionData, Tiers } from "@/lib/tierlist";
+
+type TierlistSectionProps = {
+  title: string;
+  tiers?: SectionData;
+  hideTitle?: boolean;
+};
+export function TierlistSection({
+  title,
+  tiers,
+  hideTitle,
+}: TierlistSectionProps) {
+  return (
+    <div className="mt-4 sm:mt-0">
+      {!hideTitle && <h1>{title}</h1>}
+      {Object.values(Tiers).map((tier) => (
+        <section key={tier.name} className="flex flex-col sm:flex-row">
+          <h2
+            style={{ backgroundColor: tier.bgName }}
+            className="m-0 p-2 sm:min-w-16 sm:text-center"
+          >
+            {tier.name}
+          </h2>
+          <div
+            className="flex flex-wrap gap-3 p-2 text-black sm:w-full"
+            style={{ backgroundColor: tier.bgSection }}
+          >
+            {tiers &&
+              tiers[tier.name].map((x) => (
+                <div className="whitespace-pre border rounded p-4" key={x.name}>
+                  {x.name}
+                </div>
+              ))}
+          </div>
+        </section>
+      ))}
+    </div>
+  );
+}

components/ui/tabs.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+import { cn } from "@/lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

lib/pages.ts

@@ -6,4 +6,5 @@ export const RelativePageURLs = {
   myFormations: "/formations/mine",
   search: "/search",
   devTracker: "/dev-tracker",
+  tierlist: "/tierlist",
 };

lib/tierlist.ts

@@ -0,0 +1,61 @@
+import OverallTierData from "@/public/overall-tier-data.json";
+import AfkStageTierData from "@/public/afkstage-tier-data.json";
+import ArenaTierData from "@/public/arena-tier-data.json";
+import SupremeArenaTierData from "@/public/supremearena-tier-data.json";
+import DreamRealmTierData from "@/public/dreamrealm-tier-data.json";
+import SkyclopsTierData from "@/public/skyclops-tier-data.json";
+import CroakerTierData from "@/public/croaker-tier-data.json";
+import OrsonTierData from "@/public/orson-tier-data.json";
+import CrystalBeetleTierData from "@/public/crystalbeetle-tier-data.json";
+import NecrogragonTierData from "@/public/necrogragon-tier-data.json";
+import SnowStomperTierData from "@/public/snowstomper-tier-data.json";
+import LoneGazeTierData from "@/public/lonegaze-tier-data.json";
+import AlphaBearTierData from "@/public/alphabear-tier-data.json";
+
+export type SectionData = {
+  [tier: string]: { name: string; image?: string }[];
+};
+export type Section = {
+  name: string;
+  value: string;
+  data: SectionData;
+};
+export const Sections: { [name: string]: Section } = {
+  overall: { name: "Overall", value: "overall", data: OverallTierData },
+  afk: { name: "AFK Stages", value: "afk", data: AfkStageTierData },
+  arena: { name: "Arena", value: "arena", data: ArenaTierData },
+  supreme: {
+    name: "Supreme Arena",
+    value: "supreme",
+    data: SupremeArenaTierData,
+  },
+  dream: { name: "Dream Realm", value: "dream", data: DreamRealmTierData },
+  skyclops: { name: "Skyclops", value: "skyclops", data: SkyclopsTierData },
+  croaker: { name: "Croaker", value: "croaker", data: CroakerTierData },
+  orson: { name: "Orson", value: "orson", data: OrsonTierData },
+  beetle: {
+    name: "Crystal Beetle",
+    value: "beetle",
+    data: CrystalBeetleTierData,
+  },
+  necro: { name: "Necrogragon", value: "necro", data: NecrogragonTierData },
+  stomper: {
+    name: "Snow Stomper",
+    value: "stomper",
+    data: SnowStomperTierData,
+  },
+  lone: { name: "Lone Gaze", value: "lone", data: LoneGazeTierData },
+  bear: { name: "Alpha Bear", value: "bear", data: AlphaBearTierData },
+};
+export type Tier = {
+  name: string;
+  bgName: string;
+  bgSection: string;
+};
+export const Tiers: { [name: string]: Tier } = {
+  "S+": { name: "S+", bgName: "#d85c5c", bgSection: "#ea9999" },
+  S: { name: "S", bgName: "#ea8e5c", bgSection: "#f5bf99" },
+  A: { name: "A", bgName: "#ffce5d", bgSection: "#ffe599" },
+  B: { name: "B", bgName: "#bbc167", bgSection: "#dadea1" },
+  C: { name: "C", bgName: "#82b570", bgSection: "#b6d7a8" },
+};