restore banner

packages/website/public/media/patterns/api.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="54" viewBox="0 0 21 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 38L10 49H0L11 38L0 27H10L21 38ZM21 1V21L20 22H10L21 11L10 0H20L21 1ZM10 11L0 21V1L10 11Z" fill="white"/>
+</svg>

packages/website/public/media/patterns/avatars.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="52" viewBox="0 0 30 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.8564 44V52H0V36L13.8564 44ZM30 52H16.1436V44L30 36V52ZM28.8564 18V34L15 42L1.14355 34V18L15 10L28.8564 18ZM13.8564 8L0 16V0H13.8564V8ZM30 16L16.1436 8V0H30V16Z" fill="#EEEEF0"/>
+</svg>

packages/website/public/media/patterns/tanks.svg

@@ -0,0 +1,3 @@
+<svg width="70" height="35" viewBox="0 0 70 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M70 32L64 35H0L70 0V32ZM0 32V0H64L0 32Z" fill="#EEEEF0"/>
+</svg>

packages/website/src/components/Flex/index.module.css

@@ -1,3 +1,7 @@
 .flex {
   display: flex;
+
+  &[data-column="true"] {
+    flex-direction: column;
+  }
 }

packages/website/src/components/Flex/index.tsx

@@ -5,14 +5,16 @@ import styles from "./index.module.css";
 
 interface Props extends ComponentProps<"div"> {
   gap?: Space;
+  column?: boolean;
 }
 
-export function Flex({ children, className, gap, ...props }: Props) {
+export function Flex({ children, column, className, gap, ...props }: Props) {
   return (
     <div
       {...props}
       className={classNames(styles.flex, className)}
       data-gap={gap}
+      data-column={column}
     >
       {children}
     </div>

packages/website/src/components/Skeleton/index.module.css

@@ -0,0 +1,25 @@
+@keyframes skeleton-animation {
+  0% {
+    background-color: var(--color-1);
+  }
+  50% {
+    background-color: var(--color-2);
+  }
+  100% {
+    background-color: var(--color-1);
+  }
+}
+
+.skeleton {
+  --color-1: var(--black-a5);
+  --color-2: var(--black-a4);
+
+  :global(:root.dark) & {
+    --color-1: var(--white-a3);
+    --color-2: var(--white-a2);
+  }
+
+  animation: skeleton-animation var(--duration-subtle) ease infinite;
+
+  border-radius: var(--space-2);
+}

packages/website/src/components/Skeleton/index.tsx

@@ -0,0 +1,9 @@
+import type { ComponentProps } from "react";
+import { classNames } from "../../ui/classNames";
+import styles from "./index.module.css";
+
+export interface SkeletonProps extends ComponentProps<"div"> {}
+
+export function Skeleton({ className, ...props }: SkeletonProps) {
+  return <div className={classNames(styles.skeleton, className)} {...props} />;
+}

packages/website/src/components/TankCardSkeleton/index.module.css

@@ -0,0 +1,7 @@
+.icon {
+  /* height="5rem" */
+}
+
+.name {
+  /* height="1em" */
+}

packages/website/src/components/TankCardSkeleton/index.tsx

@@ -1,11 +1,14 @@
 import { memo, useRef } from "react";
-import { useIntersection } from "../../../hooks/useIntersection";
+import { useIntersection } from "../../hooks/useIntersection";
+import { Flex } from "../Flex";
+import { Skeleton } from "../Skeleton";
+import styles from "./index.module.css";
 
 interface SkeletonTankCardProps {
   onIntersection?: () => void;
 }
 
-export const SkeletonTankCard = memo(
+export const TankCardSkeleton = memo(
   ({ onIntersection }: SkeletonTankCardProps) => {
     const card = useRef<HTMLDivElement>(null!);
 
@@ -14,9 +17,9 @@ export const SkeletonTankCard = memo(
     });
 
     return (
-      <Flex direction="column" gap="2" ref={card}>
+      <Flex column gap="2" ref={card}>
-        <Skeleton height="5rem" />
+        <Skeleton className={styles.icon} />
-        <Skeleton height="1em" />
+        <Skeleton className={styles.name} />
       </Flex>
     );
   },

packages/website/src/components/TankCardWrapper/index.module.css

@@ -0,0 +1,7 @@
+.wrapper {
+  /* py="4"
+      columns="repeat(auto-fill, minmax(7rem, 1fr))"
+      flow="dense"
+      gap="4"
+      gapY="8" */
+}

packages/website/src/components/TankCardWrapper/index.tsx

@@ -0,0 +1,10 @@
+import type { ComponentProps } from "react";
+import { classNames } from "../../ui/classNames";
+import styles from "./index.module.css";
+
+export function TankCardWrapper({
+  className,
+  ...props
+}: ComponentProps<"div">) {
+  return <div className={classNames(styles.wrapper, className)} {...props} />;
+}

packages/website/src/components/TankSearch/components/RecentlyViewed.tsx

@@ -6,7 +6,7 @@ import { TankFilters } from "../../../stores/tankFilters";
 import { TankopediaPersistent } from "../../../stores/tankopediaPersistent";
 import { TankSort } from "../../../stores/tankopediaSort";
 import { TankCard } from "../../TankCard";
-import { TankCardWrapper } from "./TankCardWrapper";
+import { TankCardWrapper } from "../../TankCardWrapper";
 
 const tankDefinitions = await api.tankDefinitions();
 

packages/website/src/components/TankSearch/components/TankCardWrapper.tsx

@@ -1,12 +0,0 @@
-export function TankCardWrapper(props: GridProps) {
-  return (
-    <Grid
-      py="4"
-      columns="repeat(auto-fill, minmax(7rem, 1fr))"
-      flow="dense"
-      gap="4"
-      gapY="8"
-      {...props}
-    />
-  );
-}

packages/website/src/components/TankSearch/index.tsx

@@ -25,14 +25,14 @@ import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonCompo
 import { Callout } from "../Callout";
 import { ExperimentIcon } from "../ExperimentIcon";
 import { Link } from "../Link";
+import { TankCardWrapper } from "../TankCardWrapper";
 import { TankSearchBar } from "../TankSearchBar";
 import { TankSearchFilters } from "../TankSearchFilters";
 import { Text } from "../Text";
 import { TankSearchCard } from "./components/Card";
 import { NoResults } from "./components/NoResults";
 import { RecentlyViewed } from "./components/RecentlyViewed";
-import { SkeletonTankCard } from "./components/SkeletonTankCard";
+import { TankCardSkeleton } from "../TankCardSkeleton";
-import { TankCardWrapper } from "./components/TankCardWrapper";
 import { MAX_RECENTLY_VIEWED } from "./constants";
 import styles from "./index.module.css";
 
@@ -513,7 +513,7 @@ export const TankSearch = memo<TankSearchProps>(
                   Math.min(PREVIEW_COUNT, sorted.length - loadedCards),
                   (index) => {
                     return (
-                      <SkeletonTankCard
+                      <TankCardSkeleton
                         key={index}
                         onIntersection={() => {
                           setLoadedCards((state) =>
@@ -538,7 +538,7 @@ export const TankSearch = memo<TankSearchProps>(
                 skeleton ? DEFAULT_LOADED_CARDS : 10 + 10 * Math.random(),
               ),
               (index) => (
-                <SkeletonTankCard key={index} />
+                <TankCardSkeleton key={index} />
               ),
             )}
           </TankCardWrapper>

packages/website/src/components/TierList/Tiles.tsx

@@ -6,8 +6,8 @@ import { api } from "../../core/blitzkit/api";
 import { filterTanks } from "../../core/blitzkit/filterTanks";
 import { TankFilters } from "../../stores/tankFilters";
 import { TierList } from "../../stores/tierList";
-import { SkeletonTankCard } from "../TankSearch/components/SkeletonTankCard";
+import { TankCardWrapper } from "../TankCardWrapper";
-import { TankCardWrapper } from "../TankSearch/components/TankCardWrapper";
+import { TankCardSkeleton } from "../TankCardSkeleton";
 import { TierListTile } from "./Tile";
 
 const [tankDefinitions, gameDefinitions] = await Promise.all([
@@ -45,7 +45,7 @@ export function TierListTiles() {
 
       {times(Math.min(PREVIEW_COUNT, sorted.length - loadedTiles), (index) => {
         return (
-          <SkeletonTankCard
+          <TankCardSkeleton
             key={index}
             onIntersection={() => {
               setLoadedTiles((state) => Math.min(state + 2, sorted.length));