Structuring frontend

frontend/src/App.tsx

@@ -1,18 +1,8 @@
-import './App.css';
-import 'bootstrap/dist/css/bootstrap.min.css';
-import GameDetails from './GameDetails.tsx';
-import Header from './Header.tsx';
-import GamesGrid from './GamesGrid.tsx';
+import "bootstrap/dist/css/bootstrap.min.css";
+import GamesGrid from "./pages/GamesGrid/GamesGrid";
 
 function App() {
-
-  return (
-    <>
-      {/* <Header/> */}
-      {/* <GameDetails /> */}
-      <GamesGrid />
-    </>
-  )
+  return <GamesGrid />;
 }
 
 export default App;

frontend/src/components/GameListItem/GameListItem.module.css

@@ -0,0 +1,34 @@
+.row {
+  display: flex;
+  align-items: center;
+  flex: 1 1 0;
+  min-height: var(--row-min-height);
+  gap: 1.5rem;
+  padding: 0 1.5rem;
+}
+
+.odd {
+  background-color: var(--color-stripe-odd);
+}
+
+.even {
+  background-color: var(--color-stripe-even);
+}
+
+.image {
+  width: 95px;
+  height: 95px;
+  object-fit: cover;
+  background-color: #ddd;
+  flex-shrink: 0;
+}
+
+.info p {
+  margin: 0;
+}
+
+.title {
+  margin: 0 0 0.25rem;
+  font-size: 1.1rem;
+  font-weight: 700;
+}

frontend/src/components/GameListItem/GameListItem.tsx

@@ -0,0 +1,31 @@
+import styles from "./GameListItem.module.css";
+
+interface GameListItemProps {
+  title: string;
+  year: number;
+  tags: string;
+  rating: number;
+  image: string;
+  striped: boolean;
+}
+
+export default function GameListItem({
+  title,
+  year,
+  tags,
+  rating,
+  image,
+  striped,
+}: GameListItemProps) {
+  return (
+    <div className={`${styles.row} ${striped ? styles.odd : styles.even}`}>
+      <img className={styles.image} src={image} alt={title} />
+      <div className={styles.info}>
+        <h3 className={styles.title}>{title}</h3>
+        <p>{year}</p>
+        <p>{tags}</p>
+        <p>{rating.toFixed(1)}/10</p>
+      </div>
+    </div>
+  );
+}

frontend/src/components/Header/Header.module.css

@@ -0,0 +1,42 @@
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  height: var(--header-height);
+  padding: 0 1.5rem;
+  background-color: var(--color-brand);
+}
+
+.brand,
+.link {
+  font-weight: 700;
+  color: var(--color-text);
+  white-space: nowrap;
+}
+
+.link {
+  text-decoration: none;
+}
+
+.search {
+  flex: 1;
+  max-width: 420px;
+}
+
+.search :global(.input-group) {
+  border-radius: 999px;
+  overflow: hidden;
+}
+
+.search :global(.form-control) {
+  border: none;
+}
+
+.search :global(.form-control:focus) {
+  box-shadow: none;
+}
+
+.search :global(.btn) {
+  border: none;
+}