From d393b145152234031f800be891793504974779ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mime=20=C4=8Cuvalo?= <mimecuvalo@gmail.com>
Date: Fri, 26 Apr 2024 15:22:22 +0100
Subject: [PATCH] examples: add filter input

---
 apps/examples/src/ExamplePage.tsx | 15 ++++++++++++++-
 apps/examples/src/styles.css      | 15 ++++++++++++++-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/apps/examples/src/ExamplePage.tsx b/apps/examples/src/ExamplePage.tsx
index 94b4fbcae..221f0d71f 100644
--- a/apps/examples/src/ExamplePage.tsx
+++ b/apps/examples/src/ExamplePage.tsx
@@ -28,6 +28,10 @@ export function ExamplePage({
 	children: React.ReactNode
 }) {
 	const categories = examples.map((e) => e.id)
+	const [filterValue, setFilterValue] = useState('')
+	const handleFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		setFilterValue(e.target.value)
+	}
 
 	return (
 		<DialogContextProvider>
@@ -69,6 +73,12 @@ export function ExamplePage({
 							Develop
 						</a>
 					</div>
+					<input
+						className="example__sidebar__filter"
+						placeholder="Filter…"
+						value={filterValue}
+						onChange={handleFilterChange}
+					/>
 					<ul className="example__sidebar__categories scroll-light">
 						{categories.map((currentCategory) => (
 							<li key={currentCategory} className="example__sidebar__category">
@@ -76,7 +86,10 @@ export function ExamplePage({
 								<ul className="example__sidebar__category__items">
 									{examples
 										.find((category) => category.id === currentCategory)
-										?.value.map((sidebarExample) => (
+										?.value.filter((example) =>
+											example.title.toLowerCase().includes(filterValue.toLowerCase())
+										)
+										.map((sidebarExample) => (
 											<ExampleSidebarListItem
 												key={sidebarExample.path}
 												example={sidebarExample}
diff --git a/apps/examples/src/styles.css b/apps/examples/src/styles.css
index a99dc6670..334e7e171 100644
--- a/apps/examples/src/styles.css
+++ b/apps/examples/src/styles.css
@@ -70,7 +70,7 @@ html,
 	width: 256px;
 	min-width: 256px;
 	display: grid;
-	grid-template-rows: auto 1fr auto;
+	grid-template-rows: auto 48px 48px 1fr auto;
 	border-right: 1px solid var(--black-transparent-light);
 	overflow: hidden;
 	font-size: 14px;
@@ -83,6 +83,14 @@ html,
 	color: inherit;
 }
 
+.example__sidebar__filter {
+	margin: 8px;
+	padding: 8px;
+	border-radius: 6px;
+	border: 1px solid #e8e8e8;
+	font-size: 14px;
+}
+
 /* Header */
 
 .example__sidebar__header {
@@ -131,10 +139,15 @@ ul.example__sidebar__categories {
 /* Category */
 
 li.example__sidebar__category {
+	display: none;
 	position: relative;
 	padding: 8px 0px;
 }
 
+.example__sidebar__category:has(> ul > li) {
+	display: block;
+}
+
 ul.example__sidebar__category__items {
 	list-style: none;
 	padding: 0px 0px 0px 4px;