added less jank scrollarea component for top30/recent10

2024-01-13 14:18:39 -05:00 · 2024-01-13 14:18:39 -05:00 · 41a2bb32cb
parent 9667005ea5
commit 41a2bb32cb
10 changed files with 236 additions and 87 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -12,7 +12,9 @@
        "@radix-ui/react-dropdown-menu": "^2.0.6",
        "@radix-ui/react-icons": "^1.3.0",
        "@radix-ui/react-label": "^2.0.2",
+        "@radix-ui/react-scroll-area": "^1.0.5",
        "@radix-ui/react-select": "^2.0.0",
+        "@radix-ui/react-separator": "^1.0.3",
        "@radix-ui/react-slot": "^1.0.2",
        "@radix-ui/react-switch": "^1.0.3",
        "@radix-ui/react-tabs": "^1.0.4",
@ -3512,6 +3514,37 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-scroll-area": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.0.5.tgz",
+      "integrity": "sha512-b6PAgH4GQf9QEn8zbT2XUHpW5z8BzqEc7Kl11TwDrvuTrxlkcjTD5qa/bxgKr+nmuXKu4L/W5UZ4mlP/VG/5Gw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/number": "1.0.1",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-select": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.0.0.tgz",
@ -3555,6 +3588,29 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-separator": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.0.3.tgz",
+      "integrity": "sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-slot": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
--- a/package.json
+++ b/package.json
@ -13,7 +13,9 @@
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-scroll-area": "^1.0.5",
    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-switch": "^1.0.3",
    "@radix-ui/react-tabs": "^1.0.4",
--- a/src/app/chunithm/page.tsx
+++ b/src/app/chunithm/page.tsx
@ -4,17 +4,15 @@ import ScoreCardList from "@/components/PlayerScoreGrid"
 import PlayerBestTopScores from "@/components/PlayerTopBestScores"
 export default function Chunithm() {
  return (
-    <div className="min-h-screen bg-background p-2">
+    <div className="min-h-screen bg-background overflow-hidden">
      <NavigationBar />
-      <div className="mt-2 flex flex-col gap-4 md:gap-6 lg:flex-row lg:gap-8">
-        <div className="w-full lg:w-1/4 xl:w-1/5">
+      <div className="flex w-full flex-col lg:w-3/4 lg:flex-row xl:w-4/5">
+        <div className="pl-2">
          <PlayerBestTopScores />
        </div>
-        <div className="flex w-full flex-col lg:w-3/4 lg:flex-row xl:w-4/5">
-          <div className="lg-md-[1300px] lg-w-[1300px] xl-w-[1300px] w-full lg:w-1/2">
-            <CharacterCard />
-            <ScoreCardList />
-          </div>
+        <div className="p-4">
+          <CharacterCard />
+          <ScoreCardList />
        </div>
      </div>
    </div>
--- a/src/app/globals.css
+++ b/src/app/globals.css
@ -201,6 +201,7 @@
    --advancedbadgecolor: 48, 75%, 57%;
    --expertbadgecolor: 343, 81%, 75%;
    --masterbadgecolor: 267, 83%, 80%;
+
    --worldsendbadgecolor: 170, 57%, 73%;
    --newbadgecolor: 343, 81%, 75%;
    --scoretext: 40, 70%, 78%;
--- a/src/app/userbox/page.tsx
+++ b/src/app/userbox/page.tsx
@ -8,6 +8,7 @@ import PlayerNamePlateComponent from "@/components/PlayerNameplate"
 import RivalComponent from "@/components/PlayerRivals"
 import { FaHeart } from "react-icons/fa" // Import heart icon from react-icons library
 import Link from "next/link" // Import Link from next/link
+import CharacterCard from "@/components/CharacterCard"
 const UserBox = () => {
  return (
    <div className="min-h-screen bg-background p-4 lg:p-2">
--- a/src/components/PlayerScoreGrid.tsx
+++ b/src/components/PlayerScoreGrid.tsx
@ -70,7 +70,7 @@ const ScoreCard: React.FC<ScoreCardProps> = ({
  const { isBestPossibleEnabled } = useSettings()

  return (
-    <div className="h-50  rounded-sm bg-cardsectionbackgroundcolor p-2 text-typography">
+    <div className="h-50  rounded-sm bg-cardsectionbackgroundcolor p-2 text-typography ">
      <div className="flex items-center justify-between">
        <span className="text-lg text-typography">{userPlayDate}</span>
        <div className="flex justify-end">
@ -361,7 +361,7 @@ const ScoreCardList = () => {
  }

  return (
-    <div className=" w-[405px] sm:w-[640px] md:w-[840px] lg:w-[690px] xl:w-[790px] 2xl:w-[1390px] ">
+    <div className=" w-[405px] sm:w-[640px] md:w-[840px] lg:w-[690px] xl:w-[790px] 2xl:w-[1390px]">
      <div className="">
        <Input
          type="text"
@ -378,7 +378,7 @@ const ScoreCardList = () => {
          </div>
        ))}
      </div>
-      <div className="mt-4 flex  justify-around">
+      <div className="mt-2 flex  justify-around">
        {" "}
        {/* Added flex and justify-center for centering */}
        <div className="rounded-md">
--- a/src/components/PlayerTopBestScores.tsx
+++ b/src/components/PlayerTopBestScores.tsx
@ -5,7 +5,9 @@ import Image from "next/image"
 import { useBestTop } from "@/app/axios/useFetchApi"
 import { usePlayerRecentRatingTable } from "@/app/axios/useFetchApi"
 import { useSettings } from "@/app/context/SettingsContext"
-
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Separator } from "./ui/separator"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 const PlayerBestTopScores = () => {
  const [bestTop, setBestTop] = useState<any[]>([])
  const [recentRatingTable, setPlayerRecentRatingTable] = useState<any[]>([])
@ -77,84 +79,94 @@ const PlayerBestTopScores = () => {
    }
  }, [bestTop, recentRatingTable, selectedSegment])
  return (
-    <div className="justify-center md:mx-auto md:px-0">
+    <div className="justify-center md:mx-auto md:px-0 ">
      <div className="flex justify-start pb-2">
-        <div className="inline-flex rounded-md shadow-sm" role="group">
-          <button
-            onClick={() => setSelectedSegment("Top30")}
-            className={`${
-              selectedSegment === "Top30"
-                ? "bg-segmentedtabactive  text-segmentedtabactivetypography shadow"
-                : "bg-segmentedtabnotactive text-segmentedtabtext hover:bg-segmentedtabactive hover:text-segmentedtabtexthover"
-            } rounded-l-lg px-4 py-2 text-sm font-bold text-segmentedtabactivetypography transition-colors duration-300 focus:outline-none`}
-          >
-            Top 30 Scores
-          </button>
-          <button
-            onClick={() => setSelectedSegment("Recent10")}
-            className={`${
-              selectedSegment === "Recent10"
-                ? "bg-segmentedtabactive text-segmentedtabactivetypography shadow "
-                : "bg-segmentedtabnotactive text-segmentedtabtext hover:bg-segmentedtabactive hover:text-segmentedtabtexthover"
-            } rounded-r-lg px-4 py-2 text-sm font-bold text-segmentedtabactivetypography transition-colors duration-300 focus:outline-none`}
-          >
-            Recent 10 Scores
-          </button>
+        <div className="inline-flex rounded-md shadow-sm " role="group">
+          <Tabs defaultValue="top30">
+            <TabsList>
+              <TabsTrigger
+                value="top30"
+                onClick={() => setSelectedSegment("Top30")}
+              >
+                Top 30
+              </TabsTrigger>
+              <TabsTrigger
+                value="recent10"
+                onClick={() => setSelectedSegment("Recent10")}
+              >
+                Recent 10
+              </TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="top30">
+              {/* Content for Top 30 */}
+              {selectedSegment === "Top30" && <div></div>}
+            </TabsContent>
+
+            <TabsContent value="recent10">
+              {/* Content for Recent 10 */}
+              {selectedSegment === "Recent10" && <div></div>}
+            </TabsContent>
+          </Tabs>
        </div>
      </div>

      <div>
        {loading && <div></div>}
        {error && <div>Error: {error}</div>}
-        <div className="">
-          <div className=" pb-2 text-typography ">
-            {isAverageEnabled && selectedSegment === "Top30" && (
-              <p>Average Rating {(averageTop30Rating / 100).toFixed(2)}</p>
-            )}
-            {isAverageEnabled && selectedSegment === "Recent10" && (
-              <p>Average Rating {(averageRecentRating / 100).toFixed(2)}</p>
-            )}
+        <div className=""></div>
+        <ScrollArea className="h-[940px] w-[340px] rounded-md border">
+          <div className="p-4">
+            <div className=" pb-2 text-typography ">
+              {isAverageEnabled && selectedSegment === "Top30" && (
+                <p>Average Rating {(averageTop30Rating / 100).toFixed(2)}</p>
+              )}
+              {isAverageEnabled && selectedSegment === "Recent10" && (
+                <p>Average Rating {(averageRecentRating / 100).toFixed(2)}</p>
+              )}
+            </div>
+            {displayedData.map((user, index) => {
+              const formattedJacketPath = `${
+                process.env.NEXT_PUBLIC_CDN
+              }JacketArt/${user.jacketPath.slice(0, -3)}png`
+
+              return (
+                <>
+                  <div key={index} className="flex items-start ">
+                    <div className="flex-none pb-2">
+                      <Image
+                        src={formattedJacketPath}
+                        alt={`${user.title} Jacket Art`}
+                        width={90}
+                        height={90}
+                        className="border-sm border-4 border-songjacketborder"
+                      />
+                    </div>
+                    <div className="flex-grow pl-2">
+                      <div className="text-typography mb-1">
+                        <span className=" text-typography text-xl">
+                          {" "}
+                          {index + 1}.
+                        </span>{" "}
+                        {user.title}
+                      </div>
+                      <div className="text-typography">
+                        {user.level}
+                        <span className="text-bestrecentratingcolor">
+                          {" "}
+                          {(user.rating / 100).toFixed(2)}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                  <div>
+                    <Separator className="my-2" />
+                  </div>
+                </>
+              )
+            })}
          </div>
-        </div>
-        <div style={{ height: "1095px", overflowY: "auto" }}>
-          {displayedData.map((user, index) => {
-            const formattedJacketPath = `${
-              process.env.NEXT_PUBLIC_CDN
-            }JacketArt/${user.jacketPath.slice(0, -3)}png`
-            return (
-              <div
-                key={index}
-                className="relative mb-4 flex items-center rounded-sm bg-cardsectionbackgroundcolor p-2 "
-              >
-                <div className="flex items-center pr-2 text-lg font-bold text-typography ">
-                  {index + 1}.
-                </div>
-                <div className="flex-none">
-                  <Image
-                    src={formattedJacketPath}
-                    alt={`${user.title} Jacket Art`}
-                    width={90}
-                    height={90}
-                    className="border-sm border-4 border-songjacketborder"
-                  />
-                </div>
-                <div className="flex-grow pl-2 ">
-                  <div className="text-typography"> {user.title}</div>
-                  <div className="pt-1 text-typography">
-                    {user.level}
-                    <span className="text-bestrecentratingcolor">
-                      {" "}
-                      {(user.rating / 100).toFixed(2)}
-                    </span>
-                  </div>
-                  <div className="pt-1 text-typography">
-                    {parseInt(user.score, 10).toLocaleString()}
-                  </div>
-                </div>
-              </div>
-            )
-          })}
-        </div>
+        </ScrollArea>
      </div>
    </div>
  )
--- a/src/components/ui/scroll-area.tsx
+++ b/src/components/ui/scroll-area.tsx
@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
--- a/src/components/ui/separator.tsx
+++ b/src/components/ui/separator.tsx
@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@ -14,8 +14,8 @@ const TabsList = React.forwardRef<
  <TabsPrimitive.List
    ref={ref}
    className={cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
-      className
+      "inline-flex h-10 items-center justify-center rounded-md bg-subsectionbackgroundcolor p-1 text-typography",
+      className,
    )}
    {...props}
  />
@ -29,8 +29,8 @@ const TabsTrigger = React.forwardRef<
  <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
+      "inline-flex items-center justify-center text-typograhy 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]:tgext-segmentedtabactive data-[state=active]:shadow-sm",
+      className,
    )}
    {...props}
  />
@ -45,7 +45,7 @@ const TabsContent = React.forwardRef<
    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
+      className,
    )}
    {...props}
  />