examples: add filter input

pull/3625/head
Mime Čuvalo 2024-04-26 15:22:22 +01:00
rodzic de55259c92
commit d393b14515
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: BA84499022AC984D
2 zmienionych plików z 28 dodań i 2 usunięć

Wyświetl plik

@ -28,6 +28,10 @@ export function ExamplePage({
children: React.ReactNode children: React.ReactNode
}) { }) {
const categories = examples.map((e) => e.id) const categories = examples.map((e) => e.id)
const [filterValue, setFilterValue] = useState('')
const handleFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setFilterValue(e.target.value)
}
return ( return (
<DialogContextProvider> <DialogContextProvider>
@ -69,6 +73,12 @@ export function ExamplePage({
Develop Develop
</a> </a>
</div> </div>
<input
className="example__sidebar__filter"
placeholder="Filter…"
value={filterValue}
onChange={handleFilterChange}
/>
<ul className="example__sidebar__categories scroll-light"> <ul className="example__sidebar__categories scroll-light">
{categories.map((currentCategory) => ( {categories.map((currentCategory) => (
<li key={currentCategory} className="example__sidebar__category"> <li key={currentCategory} className="example__sidebar__category">
@ -76,7 +86,10 @@ export function ExamplePage({
<ul className="example__sidebar__category__items"> <ul className="example__sidebar__category__items">
{examples {examples
.find((category) => category.id === currentCategory) .find((category) => category.id === currentCategory)
?.value.map((sidebarExample) => ( ?.value.filter((example) =>
example.title.toLowerCase().includes(filterValue.toLowerCase())
)
.map((sidebarExample) => (
<ExampleSidebarListItem <ExampleSidebarListItem
key={sidebarExample.path} key={sidebarExample.path}
example={sidebarExample} example={sidebarExample}

Wyświetl plik

@ -70,7 +70,7 @@ html,
width: 256px; width: 256px;
min-width: 256px; min-width: 256px;
display: grid; display: grid;
grid-template-rows: auto 1fr auto; grid-template-rows: auto 48px 48px 1fr auto;
border-right: 1px solid var(--black-transparent-light); border-right: 1px solid var(--black-transparent-light);
overflow: hidden; overflow: hidden;
font-size: 14px; font-size: 14px;
@ -83,6 +83,14 @@ html,
color: inherit; color: inherit;
} }
.example__sidebar__filter {
margin: 8px;
padding: 8px;
border-radius: 6px;
border: 1px solid #e8e8e8;
font-size: 14px;
}
/* Header */ /* Header */
.example__sidebar__header { .example__sidebar__header {
@ -131,10 +139,15 @@ ul.example__sidebar__categories {
/* Category */ /* Category */
li.example__sidebar__category { li.example__sidebar__category {
display: none;
position: relative; position: relative;
padding: 8px 0px; padding: 8px 0px;
} }
.example__sidebar__category:has(> ul > li) {
display: block;
}
ul.example__sidebar__category__items { ul.example__sidebar__category__items {
list-style: none; list-style: none;
padding: 0px 0px 0px 4px; padding: 0px 0px 0px 4px;