Skip to content

Commit eb3cc09

Browse files
DiscusserDiscusser
committed
Add search bar to filter projects
1 parent 8020131 commit eb3cc09

File tree

7 files changed

+72
-43
lines changed

7 files changed

+72
-43
lines changed

‎src/lib/components/projects/ProjectDisplay.svelte‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<script lang="ts">
2+
import { projects, type Category } from '@/constants/projects';
3+
import ProjectCard from './ProjectCard.svelte';
4+
import { cn } from '@/utils';
5+
import Input from '@/components/shared/Input.svelte';
6+
import { setContext } from 'svelte';
7+
8+
const {
9+
category,
10+
class: className,
11+
...restProps
12+
}: {
13+
category?: Category;
14+
class?: string;
15+
} = $props();
16+
17+
let searchFilter = $state('');
18+
setContext('searchFilter', () => console.log(searchFilter));
19+
</script>
20+
21+
<div class={cn('space-y-4', className)} {...restProps}>
22+
<div class="flex">
23+
<div class="w-1/3">
24+
<Input type="text" placeholder="Search..." bind:value={searchFilter} />
25+
</div>
26+
</div>
27+
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
28+
{#each projects as project}
29+
{#if (category == undefined || project.category == category) && project.name
30+
.toLowerCase()
31+
.includes(searchFilter.toLowerCase())}
32+
<ProjectCard {project} />
33+
{/if}
34+
{/each}
35+
</div>
36+
</div>

‎src/lib/components/shared/Input.svelte‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script lang="ts">
2+
import { cn } from '@/utils';
3+
import type { HTMLInputAttributes } from 'svelte/elements';
4+
5+
let {
6+
class: className,
7+
value = $bindable(),
8+
...restProps
9+
}: {
10+
class?: string;
11+
value: string;
12+
} & HTMLInputAttributes = $props();
13+
</script>
14+
15+
<input
16+
class={cn(
17+
'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
18+
className
19+
)}
20+
bind:value
21+
{...restProps}
22+
/>

‎src/routes/projects/+page.svelte‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<script lang="ts">
2-
import ProjectCard from '@/components/projects/ProjectCard.svelte';
3-
import { projects } from '@/constants/projects';
2+
import ProjectDisplay from '@/components/projects/ProjectDisplay.svelte';
43
</script>
54

65
<div class="flex flex-col space-y-4">
@@ -24,9 +23,5 @@
2423
</p>
2524
<p>You can find a non-exhaustive list of my projects below:</p>
2625

27-
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
28-
{#each projects as project}
29-
<ProjectCard {project} />
30-
{/each}
31-
</div>
26+
<ProjectDisplay />
3227
</div>

‎src/routes/projects/cpp/+page.svelte‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script lang="ts">
2-
import ProjectCard from '@/components/projects/ProjectCard.svelte';
3-
import { Category, projects } from '@/constants/projects';
2+
import ProjectDisplay from '@/components/projects/ProjectDisplay.svelte';
3+
import { Category } from '@/constants/projects';
44
</script>
55

66
<div class="flex flex-col space-y-4">
@@ -13,11 +13,5 @@
1313
</p>
1414
<p>You can find most of my C++ projects here:</p>
1515

16-
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
17-
{#each projects as project}
18-
{#if project.category == Category.Cpp}
19-
<ProjectCard {project} />
20-
{/if}
21-
{/each}
22-
</div>
16+
<ProjectDisplay category={Category.Cpp} />
2317
</div>

‎src/routes/projects/other/+page.svelte‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
11
<script lang="ts">
2-
import ProjectCard from '@/components/projects/ProjectCard.svelte';
3-
import { Category, projects } from '@/constants/projects';
2+
import ProjectDisplay from '@/components/projects/ProjectDisplay.svelte';
3+
import { Category } from '@/constants/projects';
44
</script>
55

66
<div class="flex flex-col space-y-4">
77
<p class="text-foreground text-2xl font-bold">Other</p>
88
<p>On this page you can find all my projects that don't fit into any of the other categories:</p>
99

10-
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
11-
{#each projects as project}
12-
{#if project.category == Category.Other}
13-
<ProjectCard {project} />
14-
{/if}
15-
{/each}
16-
</div>
10+
<ProjectDisplay category={Category.Other} />
1711
</div>

‎src/routes/projects/python/+page.svelte‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script lang="ts">
2-
import ProjectCard from '@/components/projects/ProjectCard.svelte';
3-
import { Category, projects } from '@/constants/projects';
2+
import ProjectDisplay from '@/components/projects/ProjectDisplay.svelte';
3+
import { Category } from '@/constants/projects';
44
</script>
55

66
<div class="flex flex-col space-y-4">
@@ -37,11 +37,5 @@
3737
</p>
3838
<p>You can find most of my Python projects here:</p>
3939

40-
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
41-
{#each projects as project}
42-
{#if project.category == Category.Python}
43-
<ProjectCard {project} />
44-
{/if}
45-
{/each}
46-
</div>
40+
<ProjectDisplay category={Category.Python} />
4741
</div>

‎src/routes/projects/web/+page.svelte‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script lang="ts">
2-
import ProjectCard from '@/components/projects/ProjectCard.svelte';
3-
import { Category, projects } from '@/constants/projects';
2+
import ProjectDisplay from '@/components/projects/ProjectDisplay.svelte';
3+
import { Category } from '@/constants/projects';
44
</script>
55

66
<div class="flex flex-col space-y-4">
@@ -15,11 +15,5 @@
1515
</p>
1616
<p>You can find most of my web projects here:</p>
1717

18-
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
19-
{#each projects as project}
20-
{#if project.category == Category.Web}
21-
<ProjectCard {project} />
22-
{/if}
23-
{/each}
24-
</div>
18+
<ProjectDisplay category={Category.Web} />
2519
</div>

0 commit comments

Comments
 (0)