feat: add search page

src/components/Card/index.tsx

@@ -5,14 +5,15 @@ import { Container, Cover, Button, Title, Subtitle, Body } from "./style";
 const DEFAULT_SUBTITLE = "Global";
 
 export type Card = {
+  hash: string;
   title: string;
   subtitle: string;
   onClick: (ev: React.MouseEvent) => void;
 };
 
-export const Card: FC<Card> = ({ title, subtitle, onClick }) => (
+export const Card: FC<Card> = ({ hash, title, subtitle, onClick }) => (
   <Container>
-    <Cover hash={[title, subtitle].join("-")}>
+    <Cover hash={hash || Date.now().toString()}>
       <Button onClick={onClick}>
         <PlayCircle size={64} />
       </Button>

src/components/Card/style.ts

@@ -2,7 +2,7 @@ import styled from "@emotion/styled";
 import gradient from "random-gradient";
 
 export const Container = styled.div`
-  border-radius: var(--sz2);
+  border-radius: var(--sz1);
 `;
 
 export type Cover = {
@@ -14,8 +14,8 @@ export const Cover = styled.div<Cover>`
   place-items: center;
   min-width: 100%;
   min-height: 120px;
-  border-top-left-radius: var(--sz2);
-  border-top-right-radius: var(--sz2);
+  border-top-left-radius: var(--sz1);
+  border-top-right-radius: var(--sz1);
   background: ${({ hash }) => gradient(hash, "vertical")};
 `;
 

src/components/Header/index.tsx

@@ -11,7 +11,7 @@ export const Header = () => (
     </Link>
 
     <Navigation>
-      <Link href="/">
+      <Link href="/search">
         <a>
           <Search />
         </a>

src/components/SearchInput/index.ts

@@ -0,0 +1,19 @@
+import styled from "@emotion/styled";
+
+export const SearchInput = styled.input`
+  width: 100%;
+  padding: var(--sz3);
+  font-size: var(--sz4);
+  border-radius: var(--sz1);
+  margin-bottom: var(--sz4);
+  color: var(--foreground);
+  background: var(--background);
+  border: 1px solid var(--accents-2);
+  outline: none;
+  transition: border-color 0.2s;
+
+  :hover,
+  :focus {
+    border-color: var(--accents-4);
+  }
+`;

src/components/StationCardList/index.tsx

@@ -27,7 +27,8 @@ export const GQLStations: FC<StationSearchInput> = graphql(
       <AutoGrid gridGap={["var(--sz4)"]}>
         {query.stations({ search }).map((station) => (
           <Card
-            key={[station.stationuuid, station.url].join("-")}
+            key={[station.url, station.stationuuid].join()}
+            hash={station.stationuuid}
             title={station.name}
             subtitle={station.country}
             onClick={() => load(station)}

src/pages/search.tsx

@@ -0,0 +1,32 @@
+import { useState, useRef, useEffect } from "react";
+import { Box } from "@/components/Box";
+import { Heading } from "@/components/Typography";
+import { SearchInput } from "@/components/SearchInput";
+import { StationCardList } from "@/components/StationCardList";
+
+export const Index = () => {
+  const input = useRef<HTMLInputElement>(null);
+  const [query, setQuery] = useState("");
+
+  const showList = query.length >= 3;
+  const onChange = ({ target: { value } }) => setQuery(value);
+
+  useEffect(() => input.current.focus(), []);
+
+  return (
+    <Box p={["var(--sz4)"]}>
+      <Heading as="h3">Search</Heading>
+
+      <SearchInput
+        type="text"
+        onChange={onChange}
+        ref={input}
+        placeholder="Type something ..."
+      />
+
+      {showList && <StationCardList name={query} limit={20} />}
+    </Box>
+  );
+};
+
+export default Index;