feat: adding panel

src/renderer/src/pages/achievements/achievement-list.tsx

@@ -2,7 +2,7 @@ import { useDate } from "@renderer/hooks";
 import type { UserAchievement } from "@types";
 import { useTranslation } from "react-i18next";
 import * as styles from "./achievements.css";
-import { CalendarIcon, EyeClosedIcon } from "@primer/octicons-react";
+import { EyeClosedIcon } from "@primer/octicons-react";
 import HydraIcon from "@renderer/assets/icons/hydra.svg?react";
 
 interface AchievementListProps {

src/renderer/src/pages/achievements/achievement-panel.css.ts

@@ -0,0 +1,65 @@
+import { style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+
+import { SPACING_UNIT, vars } from "../../theme.css";
+
+export const panel = style({
+  width: "100%",
+  height: "72px",
+  minHeight: "72px",
+  padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 3}px`,
+  backgroundColor: vars.color.background,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  transition: "all ease 0.2s",
+  borderBottom: `solid 1px ${vars.color.border}`,
+  overflow: "hidden",
+});
+
+export const content = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: `${SPACING_UNIT}px`,
+});
+
+export const actions = style({
+  display: "flex",
+  gap: `${SPACING_UNIT}px`,
+});
+
+export const downloadDetailsRow = style({
+  gap: `${SPACING_UNIT}px`,
+  display: "flex",
+  color: vars.color.body,
+  alignItems: "center",
+});
+
+export const downloadsLink = style({
+  color: vars.color.body,
+  textDecoration: "underline",
+});
+
+export const progressBar = recipe({
+  base: {
+    position: "absolute",
+    bottom: "0",
+    left: "0",
+    width: "100%",
+    height: "3px",
+    transition: "all ease 0.2s",
+    "::-webkit-progress-bar": {
+      backgroundColor: "transparent",
+    },
+    "::-webkit-progress-value": {
+      backgroundColor: vars.color.muted,
+    },
+  },
+  variants: {
+    disabled: {
+      true: {
+        opacity: vars.opacity.disabled,
+      },
+    },
+  },
+});

src/renderer/src/pages/achievements/achievement-panel.tsx

@@ -0,0 +1,37 @@
+import { useContext } from "react";
+import { useTranslation } from "react-i18next";
+
+import { useDate, useDownload } from "@renderer/hooks";
+
+import * as styles from "./achievement-panel.css";
+
+import { gameDetailsContext } from "@renderer/context";
+
+export interface HeroPanelProps {
+  isHeaderStuck: boolean;
+}
+
+export function AchievementPanel({ isHeaderStuck }: HeroPanelProps) {
+  const { t } = useTranslation("game_details");
+
+  const { formatDate } = useDate();
+
+  const { game, repacks, gameColor } = useContext(gameDetailsContext);
+
+  const { lastPacket } = useDownload();
+
+  const isGameDownloading =
+    game?.status === "active" && lastPacket?.game.id === game?.id;
+
+  const showProgressBar =
+    (game?.status === "active" && game?.progress < 1) ||
+    game?.status === "paused";
+
+  return (
+    <>
+      <div className={styles.panel}>
+        <div className={styles.content}>Teste 123131312</div>
+      </div>
+    </>
+  );
+}

src/renderer/src/pages/achievements/achievements-content.tsx

@@ -17,6 +17,7 @@ import { Link } from "@renderer/components";
 import { ComparedAchievementList } from "./compared-achievement-list";
 import * as styles from "./achievements.css";
 import { AchievementList } from "./achievement-list";
+import { AchievementPanel } from "./achievement-panel";
 
 interface UserInfo {
   id: string;
@@ -320,9 +321,15 @@ export function AchievementsContent({
         )}
 
         {otherUser ? (
-          <ComparedAchievementList achievements={comparedAchievements!} />
+          <>
+            <AchievementPanel isHeaderStuck={false} />
+            <ComparedAchievementList achievements={comparedAchievements!} />
+          </>
         ) : (
-          <AchievementList achievements={achievements!} />
+          <>
+            <AchievementPanel isHeaderStuck={false} />
+            <AchievementList achievements={achievements!} />
+          </>
         )}
       </section>
     </div>