feat/no-results-ui: add items not found ui on catalogue search

src/renderer/pages/catalogue/catalogue.css.ts

@@ -1,64 +1,75 @@
-import { style } from "@vanilla-extract/css";
-import { recipe } from "@vanilla-extract/recipes";
-import { SPACING_UNIT, vars } from "../../theme.css";
+import { style } from '@vanilla-extract/css'
+import { recipe } from '@vanilla-extract/recipes'
+import { SPACING_UNIT, vars } from '../../theme.css'
 
 export const catalogueCategories = style({
-  display: "flex",
-  gap: `${SPACING_UNIT}px`,
-});
+	display: 'flex',
+	gap: `${SPACING_UNIT}px`,
+})
 
 export const catalogueHeader = style({
-  display: "flex",
-  gap: `${SPACING_UNIT}px`,
-  justifyContent: "space-between",
-});
+	display: 'flex',
+	gap: `${SPACING_UNIT}px`,
+	justifyContent: 'space-between',
+})
 
 export const content = style({
-  width: "100%",
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT * 3}px`,
-  padding: `${SPACING_UNIT * 3}px`,
-  flex: "1",
-});
+	width: '100%',
+	height: '100%',
+	display: 'flex',
+	flexDirection: 'column',
+	gap: `${SPACING_UNIT * 3}px`,
+	padding: `${SPACING_UNIT * 3}px`,
+	flex: '1',
+})
 
 export const cards = recipe({
-  base: {
-    display: "grid",
-    gridTemplateColumns: "repeat(1, 1fr)",
-    gap: `${SPACING_UNIT * 2}px`,
-    transition: "all ease 0.2s",
-    "@media": {
-      "(min-width: 768px)": {
-        gridTemplateColumns: "repeat(2, 1fr)",
-      },
-      "(min-width: 1250px)": {
-        gridTemplateColumns: "repeat(3, 1fr)",
-      },
-      "(min-width: 1600px)": {
-        gridTemplateColumns: "repeat(4, 1fr)",
-      },
-    },
-  },
-  variants: {
-    searching: {
-      true: {
-        pointerEvents: "none",
-        opacity: vars.opacity.disabled,
-      },
-    },
-  },
-});
+	base: {
+		display: 'grid',
+		gridTemplateColumns: 'repeat(1, 1fr)',
+		gap: `${SPACING_UNIT * 2}px`,
+		transition: 'all ease 0.2s',
+		'@media': {
+			'(min-width: 768px)': {
+				gridTemplateColumns: 'repeat(2, 1fr)',
+			},
+			'(min-width: 1250px)': {
+				gridTemplateColumns: 'repeat(3, 1fr)',
+			},
+			'(min-width: 1600px)': {
+				gridTemplateColumns: 'repeat(4, 1fr)',
+			},
+		},
+	},
+	variants: {
+		searching: {
+			true: {
+				pointerEvents: 'none',
+				opacity: vars.opacity.disabled,
+			},
+		},
+	},
+})
 
 export const cardSkeleton = style({
-  width: "100%",
-  height: "180px",
-  boxShadow: "0px 0px 15px 0px #000000",
-  overflow: "hidden",
-  borderRadius: "4px",
-  transition: "all ease 0.2s",
-  zIndex: "1",
-  ":active": {
-    opacity: vars.opacity.active,
-  },
-});
+	width: '100%',
+	height: '180px',
+	boxShadow: '0px 0px 15px 0px #000000',
+	overflow: 'hidden',
+	borderRadius: '4px',
+	transition: 'all ease 0.2s',
+	zIndex: '1',
+	':active': {
+		opacity: vars.opacity.active,
+	},
+})
+
+export const noResults = style({
+	height: '100%',
+	display: 'flex',
+	alignItems: 'center',
+	justifyContent: 'center',
+	flexDirection: 'column',
+	gap: '16px',
+	gridColumn: '1 / -1',
+})

src/renderer/pages/catalogue/search-results.tsx

@@ -1,13 +1,14 @@
-import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
 import { GameCard } from "@renderer/components";
+import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
 
 import type { CatalogueEntry } from "@types";
 
-import * as styles from "./catalogue.css";
-import { useNavigate } from "react-router-dom";
-import { useAppDispatch, useAppSelector } from "@renderer/hooks";
+import { InboxIcon } from "@primer/octicons-react";
 import { clearSearch } from "@renderer/features";
+import { useAppDispatch, useAppSelector } from "@renderer/hooks";
 import { vars } from "@renderer/theme.css";
+import { useNavigate } from "react-router-dom";
+import * as styles from "./catalogue.css";
 
 export function SearchResults() {
   const { results, isLoading } = useAppSelector((state) => state.search);
@@ -22,22 +23,38 @@ export function SearchResults() {
 
   return (
     <SkeletonTheme baseColor={vars.color.background} highlightColor="#444">
-      <section className={styles.content}>
-        <section className={styles.cards({ searching: false })}>
-          {isLoading
-            ? Array.from({ length: 12 }).map((_, index) => (
-                <Skeleton key={index} className={styles.cardSkeleton} />
-              ))
-            : results.map((game) => (
-                <GameCard
-                  key={game.objectID}
-                  game={game}
-                  onClick={() => handleGameClick(game)}
-                  disabled={!game.repacks.length}
-                />
-              ))}
-        </section>
-      </section>
+      <main className={styles.content}>
+				<section className={styles.cards({ searching: false })}>
+					{isLoading &&
+						Array.from({ length: 12 }).map((_, index) => (
+							<Skeleton
+								key={index}
+								className={styles.cardSkeleton}
+							/>
+						))}
+
+					{!isLoading && results.length > 0 && (
+						<>
+							{results.map((game) => (
+								<GameCard
+									key={game.objectID}
+									game={game}
+									onClick={() => handleGameClick(game)}
+									disabled={!game.repacks.length}
+								/>
+							))}
+						</>
+					)}
+				</section>
+
+				{!isLoading && results.length === 0 && (
+					<div className={styles.noResults}>
+						<InboxIcon size={56} />
+
+						<p>Nenhum resultado encontrado</p>
+					</div>
+				)}
+			</main>
     </SkeletonTheme>
   );
 }