Added search component

app/places/page.tsx

@@ -1,6 +1,7 @@
 import Link from 'next/link'
 import { getCountryCodes } from '../../src/api/country'
 import { getPlacesData } from '../../src/api/place'
+import { Search } from '../../src/views/search'
 import styles from './places.module.css'
 
 export const dynamic = 'force-dynamic'
@@ -11,18 +12,24 @@ export default async function PlacesPage() {
     getPlacesData()
   ])
 
-  return places.map((place) => (
-    <div key={`place-${place.id}`} className={styles.uaplaces}>
-      <Link href={`places/${place.id}`}>
-        <span>{place.name}</span>
-        &nbsp;
-        <span>~</span>
-        &nbsp;
-        <span>
-          {place.city ? `${place.city} - ` : ``}
-          {countryCodes[place.iso]}
-        </span>
-      </Link>
-    </div>
-  ))
+  return (
+    <>
+      <Search />
+
+      {places.map((place) => (
+        <div key={`place-${place.id}`} className={styles.uaplaces}>
+          <Link href={`places/${place.id}`}>
+            <span>{place.name}</span>
+            &nbsp;
+            <span>~</span>
+            &nbsp;
+            <span>
+              {place.city ? `${place.city} - ` : ``}
+              {countryCodes[place.iso]}
+            </span>
+          </Link>
+        </div>
+      ))}
+    </>
+  )
 }

src/views/search/index.ts

@@ -0,0 +1 @@
+export * from './search'

src/views/search/search.module.css

@@ -0,0 +1,3 @@
+.uasearch {
+  margin-bottom: 20px;
+}

src/views/search/search.test.tsx

@@ -0,0 +1,11 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, test } from 'vitest'
+import { Search } from './search'
+
+describe('Views > Search', () => {
+  test('display input', () => {
+    render(<Search />)
+
+    expect(screen.getByRole('input')).toBeDefined()
+  })
+})

src/views/search/search.tsx

@@ -0,0 +1,15 @@
+import { memo } from 'react'
+import type { FC } from 'react'
+import styles from './search.module.css'
+
+export const Search: FC = memo(() => {
+  return (
+    <div className={styles.uasearch}>
+      <form>
+        <input />
+      </form>
+    </div>
+  )
+})
+
+Search.displayName = 'Search'