chore(test): test

package.json

@@ -20,7 +20,7 @@
     "preview": "vite preview"
   },
   "engines": {
-    "node": "20.11.1",
+    "node": "20.19.0",
     "npm": ">= 6.13.6",
     "yarn": ">= 3.4.1"
   },
@@ -49,4 +49,4 @@
       "public"
     ]
   }
-}
+}

src/__mocks/data.ts

@@ -257,57 +257,57 @@ export const allCharacters: Character[] = [
 ];
 
 export const allReactions: Reaction[] = [
-  { id: "9907", content: "�", characterId: 13, deleted: false },
+  { id: "9907", content: "👍", characterId: 13, deleted: false },
   { id: "1302", content: "🚀", characterId: 13, deleted: false },
-  { id: "9906", content: "�", characterId: 5, deleted: false },
-  { id: "1003", content: "�", characterId: 10, deleted: false },
-  { id: "9902", content: "�", characterId: 13, deleted: true },
-  { id: "9903", content: "�", characterId: 4, deleted: false },
-  { id: "1301", content: "�", characterId: 13, deleted: false },
+  { id: "9906", content: "👍", characterId: 5, deleted: false },
+  { id: "1003", content: "👍", characterId: 10, deleted: false },
+  { id: "9902", content: "👍", characterId: 13, deleted: true },
+  { id: "9903", content: "👍", characterId: 4, deleted: false },
+  { id: "1301", content: "👍", characterId: 13, deleted: false },
   { id: "401", content: "😈", characterId: 4, deleted: false },
   { id: "9908", content: "💰", characterId: 17, deleted: true },
   { id: "9901", content: "⭐", characterId: 5, deleted: false },
-  { id: "1001", content: "�", characterId: 10, deleted: false },
+  { id: "1001", content: "👍", characterId: 10, deleted: false },
   { id: "1303", content: "👍", characterId: 13, deleted: false },
   { id: "301", content: "💙", characterId: 3, deleted: false },
-  { id: "201", content: "�", characterId: 2, deleted: false },
+  { id: "201", content: "👍", characterId: 2, deleted: false },
   { id: "302", content: "⭐", characterId: 3, deleted: true },
   { id: "1002", content: "🙏", characterId: 10, deleted: true },
   { id: "1702", content: "🥶", characterId: 17, deleted: false },
-  { id: "1304", content: "�", characterId: 13, deleted: false },
-  { id: "407", content: "�", characterId: 4, deleted: true },
+  { id: "1304", content: "👍", characterId: 13, deleted: false },
+  { id: "407", content: "👍", characterId: 4, deleted: true },
   { id: "202", content: "🤖", characterId: 2, deleted: false },
-  { id: "1502", content: "�", characterId: 15, deleted: false },
+  { id: "1502", content: "👍", characterId: 15, deleted: false },
   { id: "9905", content: "🤖", characterId: 3, deleted: false },
   { id: "1701", content: "💰", characterId: 17, deleted: false },
-  { id: "1501", content: "🧙", characterId: 15, deleted: false },
-  { id: "401", content: "�", characterId: 4, deleted: false },
-  { id: "303", content: "⚡", characterId: 3, deleted: false },
-  { id: "9904", content: "�", characterId: 1, deleted: false },
-  { id: "2202", content: "�", characterId: 22, deleted: false },
+  { id: "1505", content: "🧙", characterId: 15, deleted: false },
+  { id: "402", content: "👍", characterId: 4, deleted: false },
+  { id: "304", content: "⚡", characterId: 3, deleted: false },
+  { id: "9904", content: "👍", characterId: 1, deleted: false },
+  { id: "2202", content: "👍", characterId: 22, deleted: false },
   { id: "1503", content: "✨", characterId: 15, deleted: false },
   { id: "1202", content: "🤣", characterId: 12, deleted: false },
-  { id: "405", content: "�", characterId: 4, deleted: false },
+  { id: "405", content: "👍", characterId: 4, deleted: false },
   { id: "203", content: "❓", characterId: 2, deleted: false },
-  { id: "406", content: "�", characterId: 4, deleted: false },
-  { id: "1504", content: "�", characterId: 15, deleted: false },
+  { id: "406", content: "👍", characterId: 4, deleted: false },
+  { id: "1504", content: "👍", characterId: 15, deleted: false },
   { id: "2201", content: "🟣", characterId: 22, deleted: false },
-  { id: "1802", content: "�", characterId: 18, deleted: false },
+  { id: "1802", content: "👍", characterId: 18, deleted: false },
   { id: "204", content: "🤖", characterId: 2, deleted: false },
   { id: "503", content: "⭐", characterId: 5, deleted: false },
-  { id: "501", content: "�", characterId: 5, deleted: false },
-  { id: "1501", content: "�", characterId: 15, deleted: false },
+  { id: "501", content: "👍", characterId: 5, deleted: false },
+  { id: "1506", content: "👍", characterId: 15, deleted: false },
   { id: "504", content: "👑", characterId: 5, deleted: false },
-  { id: "104", content: "�", characterId: 1, deleted: false },
-  { id: "1201", content: "�", characterId: 12, deleted: false },
+  { id: "104", content: "👍", characterId: 1, deleted: false },
+  { id: "1201", content: "👍", characterId: 12, deleted: false },
   { id: "1801", content: "🎩", characterId: 18, deleted: false },
-  { id: "303", content: "⚡", characterId: 3, deleted: false },
+  { id: "305", content: "⚡", characterId: 3, deleted: false },
   { id: "102", content: "⭐", characterId: 1, deleted: false },
-  { id: "502", content: "�", characterId: 5, deleted: false },
-  { id: "401", content: "😈", characterId: 4, deleted: false },
-  { id: "103", content: "�", characterId: 1, deleted: true },
+  { id: "502", content: "👍", characterId: 5, deleted: false },
+  { id: "403", content: "😈", characterId: 4, deleted: false },
+  { id: "103", content: "👍", characterId: 1, deleted: true },
   { id: "404", content: "😈", characterId: 4, deleted: false },
-  { id: "105", content: "�", characterId: 1, deleted: false },
-  { id: "106", content: "�", characterId: 1, deleted: true },
-  { id: "1004", content: "�", characterId: 10, deleted: false },
+  { id: "105", content: "👍", characterId: 1, deleted: false },
+  { id: "106", content: "👍", characterId: 1, deleted: true },
+  { id: "1004", content: "👍", characterId: 10, deleted: false },
 ];

src/api/index.tsx

@@ -0,0 +1,47 @@
+import { Character, Reaction } from '../types';
+
+export interface CharactersResponse {
+  results: Character[];
+  total: number;
+  page: number;
+  limit: number;
+  next: string | null;
+  previous: string | null;
+}
+
+export interface ReactionsResponse {
+  reactions: Reaction[];
+}
+
+export const fetchCharacters = async (
+  searchName: string = '',
+  page: number = 1,
+  limit: number = 4
+): Promise<CharactersResponse> => {
+  const params = new URLSearchParams({
+    page: page.toString(),
+    limit: limit.toString(),
+  });
+
+  if (searchName) {
+    params.append('name', searchName);
+  }
+
+  const response = await fetch(`/api/characters?${params.toString()}`);
+
+  if (!response.ok) {
+    throw new Error('Failed to fetch characters');
+  }
+
+  return response.json();
+};
+
+export const fetchReactions = async (): Promise<ReactionsResponse> => {
+  const response = await fetch('/api/reactions');
+
+  if (!response.ok) {
+    throw new Error('Failed to fetch reactions');
+  }
+
+  return response.json();
+};

src/components/App/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import {
   BrowserRouter as Router,
@@ -10,11 +10,22 @@ import { Header } from '../Header';
 import { Content } from '../Content';
 
 export const App: React.FC = () => {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [triggerSearch, setTriggerSearch] = useState(0);
+
+  const handleSearchSubmit = () => {
+    setTriggerSearch(prev => prev + 1);
+  };
+
   return (
     <Router>
-			<Header />
+			<Header
+        searchQuery={searchQuery}
+        onSearchChange={setSearchQuery}
+        onSearchSubmit={handleSearchSubmit}
+      />
 			<Routes>
-				<Route path="/" element={<Content />} />
+				<Route path="/" element={<Content searchQuery={searchQuery} triggerSearch={triggerSearch} />} />
 			</Routes>
 		</Router>
   );

src/components/CharacterCard/index.scss

@@ -0,0 +1,107 @@
+.character-card {
+  display: flex;
+  gap: 24px;
+  padding: 24px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  margin-bottom: 24px;
+}
+
+.character-card__image-container {
+  flex-shrink: 0;
+  width: 160px;
+  height: 240px;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #f5f5f5;
+}
+
+.character-card__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.character-card__placeholder-image {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #999;
+  font-size: 14px;
+}
+
+.character-card__content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.character-card__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.character-card__name {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 600;
+  color: #000;
+}
+
+.character-card__badges {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.character-card__description {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.6;
+  color: #333;
+}
+
+.character-card__affiliations {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.character-card__reactions {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-top: 4px;
+}
+
+.character-card__reaction {
+  font-size: 24px;
+  padding: 4px 8px;
+  background: #f5f5f5;
+  border: 1px solid #ddd;
+  border-radius: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  position: relative;
+}
+
+.character-card__reaction-count {
+  font-size: 14px;
+  font-weight: 600;
+  color: #666;
+  background: #e0e0e0;
+  padding: 2px 6px;
+  border-radius: 50px;
+  line-height: 1;
+  min-width: 20px;
+  text-align: center;
+}

src/components/CharacterCard/index.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { Character, Reaction } from '../../types';
+import { Chip, ChipGroup } from '@lumx/react';
+import './index.scss';
+
+interface CharacterCardProps {
+  character: Character;
+  reactions: Reaction[];
+}
+
+export const CharacterCard: React.FC<CharacterCardProps> = ({ character, reactions }) => {
+  const characterReactions = reactions.filter(
+    (reaction) => reaction.characterId === character.id && !reaction.deleted
+  );
+
+  // Group reactions by content and count them
+  const groupedReactions = characterReactions.reduce((acc, reaction) => {
+    const content = reaction.content;
+    if (!acc[content]) {
+      acc[content] = { content, count: 0 };
+    }
+    acc[content].count++;
+    return acc;
+  }, {} as Record<string, { content: string; count: number }>);
+
+  const reactionGroups = Object.values(groupedReactions);
+
+  return (
+    <div className="character-card">
+      <div className="character-card__image-container">
+        {character.imageUrl ? (
+          <img
+            src={character.imageUrl}
+            alt={character.name}
+            className="character-card__image"
+          />
+        ) : (
+          <div className="character-card__placeholder-image">No Image</div>
+        )}
+      </div>
+
+      <div className="character-card__content">
+        <div className="character-card__header">
+          <h2 className="character-card__name">{character.name}</h2>
+          <div className="character-card__badges">
+            {character.species && (
+              <Chip size="s" theme="light">
+                {character.species.toUpperCase()}
+              </Chip>
+            )}
+            {character.birthYear && (
+              <Chip size="s" theme="light">
+                {character.birthYear}
+              </Chip>
+            )}
+          </div>
+        </div>
+
+        {character.description && (
+          <p className="character-card__description">{character.description}</p>
+        )}
+
+        {character.affiliations && character.affiliations.length > 0 && (
+          <ChipGroup className="character-card__affiliations">
+            {character.affiliations.map((affiliation, index) => (
+              <Chip key={index} size="s">
+                {affiliation}
+              </Chip>
+            ))}
+          </ChipGroup>
+        )}
+
+        {reactionGroups.length > 0 && (
+          <div className="character-card__reactions">
+            {reactionGroups.map((group) => (
+              <span key={group.content} className="character-card__reaction">
+                {group.content}
+                <span className="character-card__reaction-count">{group.count}</span>
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};