Skip to content
This repository was archived by the owner on May 20, 2025. It is now read-only.

Commit fadae86

Browse files
davemooreuwsdavemooreuws
committed
fix guides in prod
1 parent 39f0e0a commit fadae86

File tree

6 files changed

+121
-64
lines changed

6 files changed

+121
-64
lines changed

‎docs/guides.mdx‎

Whitespace-only changes.

‎src/app/guides/page.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import Breadcrumbs from '@/components/Breadcrumbs'
2-
import GuideList from '@/components/guides/GuideList'
1+
import GuidePage from '@/components/guides/GuidePage'
32
import {
43
Breadcrumb,
54
BreadcrumbItem,
@@ -48,7 +47,7 @@ export default function GuidesPage() {
4847
</div>
4948
<div className="-mx-2 border-t px-4 sm:-mx-6 lg:-mx-8">
5049
<div className="mx-auto max-w-7xl px-4">
51-
<GuideList guides={allGuides} allTags={allTags} />
50+
<GuidePage guides={allGuides} allTags={allTags} />
5251
</div>
5352
</div>
5453
</>

‎src/components/guides/GuideFilterCheckbox.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
'use client'
2+
3+
import React from 'react'
4+
import { Checkbox } from '../ui/checkbox'
5+
import useParams from '@/hooks/useParams'
6+
7+
interface GuideFilterCheckboxProps {
8+
tag: string
9+
}
10+
11+
const GuideFilterCheckbox: React.FC<GuideFilterCheckboxProps> = ({ tag }) => {
12+
const { searchParams, setParams } = useParams()
13+
const selectedTags = searchParams.get('tags')?.split(',') || []
14+
15+
return (
16+
<div className="flex items-center space-x-4">
17+
<Checkbox
18+
id={tag}
19+
checked={selectedTags.includes(tag)}
20+
onCheckedChange={(checked) => {
21+
if (checked) {
22+
setParams('tags', [...selectedTags, tag].join(','))
23+
} else {
24+
setParams(
25+
'tags',
26+
selectedTags
27+
.filter((selectedTag) => selectedTag !== tag)
28+
.join(','),
29+
)
30+
}
31+
}}
32+
className="h-5 w-5 border-primary-400 data-[state=checked]:bg-primary"
33+
/>
34+
<label
35+
htmlFor={tag}
36+
className="cursor-pointer text-base font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
37+
>
38+
{tag}
39+
</label>
40+
</div>
41+
)
42+
}
43+
44+
export default GuideFilterCheckbox

‎src/components/guides/GuideFilters.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React, { Suspense } from 'react'
2+
import { LanguageSwitch } from './LanguageSwitch'
3+
import GuideFilterCheckbox from './GuideFilterCheckbox'
4+
5+
interface Props {
6+
allTags: string[]
7+
}
8+
9+
export const GuideFilters: React.FC<Props> = ({ allTags }) => {
10+
return (
11+
<>
12+
<ul className="space-y-4">
13+
{allTags.map((tag) => (
14+
<li key={tag}>
15+
<Suspense>
16+
<GuideFilterCheckbox tag={tag} />
17+
</Suspense>
18+
</li>
19+
))}
20+
</ul>
21+
<Suspense>
22+
<LanguageSwitch />
23+
</Suspense>
24+
</>
25+
)
26+
}

‎src/components/guides/GuideList.tsx‎

Lines changed: 16 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,12 @@
11
'use client'
22

3-
import { Doc } from '@/content'
43
import React from 'react'
54
import GuideItem from './GuideItem'
6-
import { Checkbox } from '../ui/checkbox'
5+
import { Doc } from '@/content'
6+
import { cn } from '@/lib/utils'
77
import useParams from '@/hooks/useParams'
8-
import { LanguageSwitch } from './LanguageSwitch'
98
import useLang from '@/hooks/useLang'
109

11-
interface Props {
12-
guides: Doc[]
13-
allTags: string[]
14-
}
15-
1610
const langPathMap: Record<string, string> = {
1711
javascript: 'guides/nodejs',
1812
typescript: 'guides/nodejs',
@@ -25,11 +19,15 @@ const isLangSlug = (slug: string) => {
2519
return Object.values(langPathMap).some((path) => slug.startsWith(path))
2620
}
2721

28-
const GuideList: React.FC<Props> = ({ guides, allTags }) => {
29-
const { searchParams, setParams } = useParams()
22+
interface Props {
23+
guides: Doc[]
24+
className?: string
25+
}
26+
27+
const GuideList: React.FC<Props> = ({ className, guides }) => {
28+
const { searchParams } = useParams()
3029
const selectedTags = searchParams.get('tags')?.split(',') || []
3130
const { currentLanguage } = useLang()
32-
3331
const filteredGuides = guides.filter((guide) => {
3432
let include = true
3533

@@ -43,56 +41,13 @@ const GuideList: React.FC<Props> = ({ guides, allTags }) => {
4341
})
4442

4543
return (
46-
<div>
47-
<div className="gap-x-4 lg:grid lg:grid-cols-[280px,1fr]">
48-
<div className="border-r">
49-
<aside
50-
aria-label="Sidebar"
51-
className="sticky top-[calc(var(--header-height)+1px+2rem)] mt-10 hidden max-h-[calc(100vh-var(--header-height)-3rem)] w-80 space-y-10 overflow-y-auto lg:block"
52-
>
53-
<ul className="space-y-4">
54-
{allTags.map((tag) => (
55-
<li key={tag}>
56-
<div className="flex items-center space-x-4">
57-
<Checkbox
58-
id={tag}
59-
checked={selectedTags.includes(tag)}
60-
onCheckedChange={(checked) => {
61-
if (checked) {
62-
setParams('tags', [...selectedTags, tag].join(','))
63-
} else {
64-
setParams(
65-
'tags',
66-
selectedTags
67-
.filter((selectedTag) => selectedTag !== tag)
68-
.join(','),
69-
)
70-
}
71-
}}
72-
className="h-5 w-5 border-primary-400 data-[state=checked]:bg-primary"
73-
/>
74-
<label
75-
htmlFor={tag}
76-
className="cursor-pointer text-base font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
77-
>
78-
{tag}
79-
</label>
80-
</div>
81-
</li>
82-
))}
83-
</ul>
84-
<LanguageSwitch />
85-
</aside>
86-
</div>
87-
<ul className="relative mx-8 mt-10 w-full space-y-4">
88-
{filteredGuides.map((guide) => (
89-
<li key={guide.slug}>
90-
<GuideItem guide={guide} />
91-
</li>
92-
))}
93-
</ul>
94-
</div>
95-
</div>
44+
<ul className={cn('space-y-4', className)}>
45+
{filteredGuides.map((guide) => (
46+
<li key={guide.slug}>
47+
<GuideItem guide={guide} />
48+
</li>
49+
))}
50+
</ul>
9651
)
9752
}
9853

‎src/components/guides/GuidePage.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { Doc } from '@/content'
2+
import React, { Suspense } from 'react'
3+
4+
import { GuideFilters } from './GuideFilters'
5+
import GuideList from './GuideList'
6+
7+
interface Props {
8+
guides: Doc[]
9+
allTags: string[]
10+
}
11+
12+
// TODO change this to use server actions
13+
const GuidePage: React.FC<Props> = ({ guides, allTags }) => {
14+
return (
15+
<div>
16+
<div className="gap-x-4 lg:grid lg:grid-cols-[280px,1fr]">
17+
<div className="border-r">
18+
<aside
19+
aria-label="Sidebar"
20+
className="sticky top-[calc(var(--header-height)+1px+2rem)] mt-10 hidden max-h-[calc(100vh-var(--header-height)-3rem)] w-80 space-y-10 overflow-y-auto lg:block"
21+
>
22+
<GuideFilters allTags={allTags} />
23+
</aside>
24+
</div>
25+
<Suspense>
26+
<GuideList guides={guides} className="relative mx-8 mt-10 w-full" />
27+
</Suspense>
28+
</div>
29+
</div>
30+
)
31+
}
32+
33+
export default GuidePage

0 commit comments

Comments
 (0)