From 1f3e1045c3f1b562d0c0ac09359574389f7d6fc5 Mon Sep 17 00:00:00 2001
From: Mathias Schopmans <mathias.schopmans@aoe.com>
Date: Mon, 19 Feb 2024 11:15:19 +0100
Subject: [PATCH] feat: add basic overview page

---
 src/components/Badge/Badge.module.css        | 21 +++++++
 src/components/Badge/Badge.tsx               |  6 ++
 src/components/Filter/Filter.module.css      |  8 +++
 src/components/Filter/Filter.tsx             | 25 +++++++++
 src/components/Filter/QueryFilter.module.css | 25 +++++++++
 src/components/Filter/QueryFilter.tsx        | 29 ++++++++++
 src/components/Filter/RingFilter.module.css  |  8 +++
 src/components/Filter/RingFilter.tsx         | 43 ++++++++++++++
 src/components/ItemList/ItemList.tsx         |  3 +-
 src/components/QuadrantList/QuadrantList.tsx |  7 +--
 src/pages/_app.tsx                           |  2 +-
 src/pages/index.tsx                          |  1 -
 src/pages/overview.tsx                       | 59 ++++++++++++++++++++
 src/styles/globals.css                       | 20 +++++++
 14 files changed, 249 insertions(+), 8 deletions(-)
 create mode 100644 src/components/Filter/Filter.module.css
 create mode 100644 src/components/Filter/Filter.tsx
 create mode 100644 src/components/Filter/QueryFilter.module.css
 create mode 100644 src/components/Filter/QueryFilter.tsx
 create mode 100644 src/components/Filter/RingFilter.module.css
 create mode 100644 src/components/Filter/RingFilter.tsx
 create mode 100644 src/pages/overview.tsx

diff --git a/src/components/Badge/Badge.module.css b/src/components/Badge/Badge.module.css
index 330aa87..3242ff2 100644
--- a/src/components/Badge/Badge.module.css
+++ b/src/components/Badge/Badge.module.css
@@ -27,3 +27,24 @@
   color: var(--foreground);
   background-color: var(--badge);
 }
+
+.selectable {
+  cursor: pointer;
+
+  &:not(.selected) {
+    color: var(--foreground);
+    border: 1px solid var(--foreground);
+    background: transparent;
+  }
+
+  &:not(.colored) {
+    color: var(--foreground);
+    border: 1px solid var(--foreground);
+    background: transparent;
+
+    &.selected {
+      color: var(--background);
+      background: #fff;
+    }
+  }
+}
diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
index fe83d4b..2cb07ee 100644
--- a/src/components/Badge/Badge.tsx
+++ b/src/components/Badge/Badge.tsx
@@ -15,6 +15,8 @@ import { cn } from "@/lib/utils";
 interface BadgeProps extends ComponentPropsWithoutRef<"span"> {
   children?: ReactNode;
   color?: string;
+  selectable?: boolean;
+  selected?: boolean;
   size?: "small" | "medium" | "large";
 }
 
@@ -22,6 +24,8 @@ export function Badge({
   children,
   color,
   size = "medium",
+  selectable,
+  selected,
   ...props
 }: BadgeProps) {
   const style = useMemo(
@@ -40,6 +44,8 @@ export function Badge({
         styles.badge,
         styles[`size-${size}`],
         color && styles.colored,
+        selectable && styles.selectable,
+        selected && styles.selected,
       )}
     >
       {children}
diff --git a/src/components/Filter/Filter.module.css b/src/components/Filter/Filter.module.css
new file mode 100644
index 0000000..b95a1b4
--- /dev/null
+++ b/src/components/Filter/Filter.module.css
@@ -0,0 +1,8 @@
+.filter {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+  gap: 20px;
+}
diff --git a/src/components/Filter/Filter.tsx b/src/components/Filter/Filter.tsx
new file mode 100644
index 0000000..25550c1
--- /dev/null
+++ b/src/components/Filter/Filter.tsx
@@ -0,0 +1,25 @@
+import styles from "./Filter.module.css";
+
+import { QueryFilter } from "@/components/Filter/QueryFilter";
+import { RingFilter } from "@/components/Filter/RingFilter";
+
+interface FilterProps {
+  query?: string;
+  onQueryChange: (query: string) => void;
+  ring?: string;
+  onRingChange: (ring: string) => void;
+}
+
+export function Filter({
+  query,
+  onQueryChange,
+  ring,
+  onRingChange,
+}: FilterProps) {
+  return (
+    <div className={styles.filter}>
+      <QueryFilter value={query} onChange={onQueryChange} />
+      <RingFilter value={ring} onChange={onRingChange} />
+    </div>
+  );
+}
diff --git a/src/components/Filter/QueryFilter.module.css b/src/components/Filter/QueryFilter.module.css
new file mode 100644
index 0000000..91ed846
--- /dev/null
+++ b/src/components/Filter/QueryFilter.module.css
@@ -0,0 +1,25 @@
+.filter {
+  flex: 1 1 100%;
+  position: relative;
+}
+
+.input {
+  padding-right: 50px;
+}
+
+.button {
+  position: absolute;
+  top: 50%;
+  right: 16px;
+  width: 20px;
+  height: 20px;
+  margin: -10px 0 0;
+  background: transparent;
+  border: none;
+}
+
+@media (min-width: 768px) {
+  .filter {
+    flex: 1 1 auto;
+  }
+}
diff --git a/src/components/Filter/QueryFilter.tsx b/src/components/Filter/QueryFilter.tsx
new file mode 100644
index 0000000..4fe9cf1
--- /dev/null
+++ b/src/components/Filter/QueryFilter.tsx
@@ -0,0 +1,29 @@
+import { ChangeEvent } from "react";
+
+import Search from "../Icons/Search";
+import styles from "./QueryFilter.module.css";
+
+interface QueryFilterProps {
+  value?: string;
+  onChange: (value: string) => void;
+}
+
+export function QueryFilter({ value, onChange }: QueryFilterProps) {
+  const _onChange = (e: ChangeEvent<HTMLInputElement>) => {
+    onChange(e.target.value);
+  };
+
+  return (
+    <div className={styles.filter}>
+      <input
+        className={styles.input}
+        type="search"
+        value={value}
+        onChange={_onChange}
+      />
+      <button className={styles.button} type="submit">
+        <Search />
+      </button>
+    </div>
+  );
+}
diff --git a/src/components/Filter/RingFilter.module.css b/src/components/Filter/RingFilter.module.css
new file mode 100644
index 0000000..004c2f6
--- /dev/null
+++ b/src/components/Filter/RingFilter.module.css
@@ -0,0 +1,8 @@
+.filter {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
diff --git a/src/components/Filter/RingFilter.tsx b/src/components/Filter/RingFilter.tsx
new file mode 100644
index 0000000..b7b41ed
--- /dev/null
+++ b/src/components/Filter/RingFilter.tsx
@@ -0,0 +1,43 @@
+import styles from "./RingFilter.module.css";
+
+import { Badge, RingBadge } from "@/components/Badge/Badge";
+import { getRings } from "@/lib/data";
+import { cn } from "@/lib/utils";
+
+interface RingFilterProps {
+  value?: string;
+  onChange: (value: string) => void;
+  className?: string;
+}
+
+export function RingFilter({ value, onChange, className }: RingFilterProps) {
+  const rings = getRings();
+
+  return (
+    <ul className={cn(styles.filter, className)}>
+      <li>
+        <Badge
+          size="large"
+          selectable
+          selected={!value}
+          onClick={() => {
+            onChange("");
+          }}
+        >
+          All
+        </Badge>
+      </li>
+      {rings.map((ring) => (
+        <li key={ring.id}>
+          <RingBadge
+            ring={ring.id}
+            size="large"
+            selectable
+            selected={value === ring.id}
+            onClick={() => onChange(ring.id)}
+          />
+        </li>
+      ))}
+    </ul>
+  );
+}
diff --git a/src/components/ItemList/ItemList.tsx b/src/components/ItemList/ItemList.tsx
index e70a678..7740070 100644
--- a/src/components/ItemList/ItemList.tsx
+++ b/src/components/ItemList/ItemList.tsx
@@ -9,7 +9,7 @@ import { cn } from "@/lib/utils";
 export interface ItemListProps {
   items: Item[];
   activeId?: string;
-  size?: "small" | "default";
+  size?: "small" | "default" | "large";
   className?: string;
 }
 
@@ -23,6 +23,7 @@ export function ItemList({
     <ul
       className={cn(styles.list, className, {
         [styles.isSmall]: size === "small",
+        [styles.large]: size === "large",
       })}
     >
       {items.map((item) => (
diff --git a/src/components/QuadrantList/QuadrantList.tsx b/src/components/QuadrantList/QuadrantList.tsx
index 7e6b348..f0bea7a 100644
--- a/src/components/QuadrantList/QuadrantList.tsx
+++ b/src/components/QuadrantList/QuadrantList.tsx
@@ -3,16 +3,13 @@ import Link from "next/link";
 import styles from "./QuadrantList.module.css";
 
 import { RingList } from "@/components/RingList/RingList";
-import {
-  getQuadrant,
-  groupItemsByQuadrant,
-  groupItemsByRing,
-} from "@/lib/data";
+import { getQuadrant, groupItemsByQuadrant } from "@/lib/data";
 import { Item } from "@/lib/types";
 
 interface RingListProps {
   items: Item[];
 }
+
 export function QuadrantList({ items }: RingListProps) {
   const quadrants = groupItemsByQuadrant(items);
   return (
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 5a762be..b141b7e 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -24,7 +24,7 @@ export default function App({ Component, pageProps, router }: CustomAppProps) {
         <link rel="icon" href={assetUrl("/favicon.ico")} />
       </Head>
       <Layout layoutClass={Component.layoutClass}>
-        <Component {...pageProps} key={router.asPath} />
+        <Component {...pageProps} />
       </Layout>
     </>
   );
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 93a5037..806dccd 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,4 +1,3 @@
-import { ItemList } from "@/components/ItemList/ItemList";
 import { QuadrantList } from "@/components/QuadrantList/QuadrantList";
 import { getAppName, getItems, getReleases } from "@/lib/data";
 import { CustomPage } from "@/pages/_app";
diff --git a/src/pages/overview.tsx b/src/pages/overview.tsx
new file mode 100644
index 0000000..e61a623
--- /dev/null
+++ b/src/pages/overview.tsx
@@ -0,0 +1,59 @@
+import Head from "next/head";
+import { useRouter } from "next/router";
+import { useCallback, useMemo } from "react";
+
+import { Filter } from "@/components/Filter/Filter";
+import { ItemList } from "@/components/ItemList/ItemList";
+import { getItems } from "@/lib/data";
+import { formatTitle } from "@/lib/format";
+import { CustomPage } from "@/pages/_app";
+
+const Overview: CustomPage = () => {
+  const router = useRouter();
+  const ring = router.query.ring as string | undefined;
+  const query = router.query.query as string | undefined;
+
+  const onRingChange = useCallback(
+    (ring: string) => {
+      router.push({ query: { ...router.query, ring, query } });
+    },
+    [router, query],
+  );
+
+  const onQueryChange = useCallback(
+    (query: string) => {
+      router.replace({ query: { ...router.query, ring, query } });
+    },
+    [router, ring],
+  );
+
+  const items = useMemo(() => {
+    if (!ring && !query) return getItems();
+    return getItems().filter((item) => {
+      if (ring && item.ring !== ring) return false;
+      return !(
+        query && !item.title.toLowerCase().includes(query.toLowerCase())
+      );
+    });
+  }, [query, ring]);
+
+  return (
+    <>
+      <Head>
+        <title>{formatTitle("Technologies Overview")}</title>
+      </Head>
+
+      <h1>Technologies Overview</h1>
+      <Filter
+        query={query}
+        ring={ring}
+        onRingChange={onRingChange}
+        onQueryChange={onQueryChange}
+      />
+
+      <ItemList items={items} />
+    </>
+  );
+};
+
+export default Overview;
diff --git a/src/styles/globals.css b/src/styles/globals.css
index a096661..c1b3f78 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -18,6 +18,7 @@
 
 * {
   box-sizing: border-box;
+  outline-color: var(--highlight);
   padding: 0;
   margin: 0;
 }
@@ -88,3 +89,22 @@ ol {
   padding-left: 16px;
   margin-bottom: 1em;
 }
+
+input {
+  background: var(--foreground);
+  color: var(--background);
+  border: 1px solid transparent;
+  padding: 10px 12px;
+  border-radius: 6px;
+  width: 100%;
+  font-size: 16px;
+
+  &:focus {
+    outline: none;
+    border-color: var(--highlight);
+  }
+}
+
+input::-webkit-search-cancel-button {
+  display: none;
+}