Skip to content

Commit 6f85180

Browse files
davidlyonsdavidlyons
committed
moved layout and sort controls to first row, center pagination middle text
1 parent ead05f3 commit 6f85180

3 files changed

Lines changed: 94 additions & 97 deletions

File tree

‎src/App.tsx‎

Lines changed: 84 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,104 @@
11
import { useState } from 'react'
22
import { Input } from '@/components/ui/input'
33
import { Button } from '@/components/ui/button'
4-
import { ExternalLink } from 'lucide-react'
5-
import { VinylBrowser } from '@/components/VinylBrowser'
4+
import { ExternalLink, LayoutGrid, LayoutList, AlignJustify } from 'lucide-react'
5+
import { VinylBrowser, type View } from '@/components/VinylBrowser'
66
import { GitHubLogoIcon } from '@radix-ui/react-icons'
7+
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
8+
import {
9+
Select,
10+
SelectContent,
11+
SelectItem,
12+
SelectTrigger,
13+
SelectValue,
14+
} from '@/components/ui/select'
15+
import { sortOptions, type SortingOption } from '@/lib/sort'
716

817
export const App = () => {
918
const [user, setUser] = useState('davidlyons')
1019
const [page, setPage] = useState(1)
20+
const [view, setView] = useState<View>('covers-text')
21+
const [sort, setSort] = useState<SortingOption>(sortOptions[0])
1122

1223
return (
1324
<div className="overflow-hidden pt-14 pb-8 min-[1680px]:pb-14">
1425
<div className="container">
15-
<div className="mb-5 flex items-center gap-2 text-sm">
16-
<span className="font-bold">Discogs user</span>
17-
<Input
18-
className="w-auto"
19-
name="user"
20-
placeholder="Discogs username"
21-
value={user}
22-
onChange={(e) => {
23-
setUser(e.target.value)
24-
setPage(1) // reset page to 1 when user changes
25-
}}
26-
/>
27-
<Button variant="outline" size="icon" aria-label="Open Discogs profile" asChild>
28-
<a
29-
href={`https://www.discogs.com/user/${user}`}
30-
target="_blank"
31-
rel="noopener noreferrer"
26+
<div className="mb-5 flex flex-wrap justify-center gap-4 text-sm md:justify-between">
27+
{/* username input */}
28+
<div className="flex items-center gap-2">
29+
<span className="font-bold">Discogs user</span>
30+
<Input
31+
className="w-auto"
32+
name="user"
33+
placeholder="Discogs username"
34+
value={user}
35+
onChange={(e) => {
36+
setUser(e.target.value)
37+
setPage(1) // reset page to 1 when user changes
38+
}}
39+
/>
40+
<Button variant="outline" size="icon" aria-label="Open Discogs profile" asChild>
41+
<a
42+
href={`https://www.discogs.com/user/${user}`}
43+
target="_blank"
44+
rel="noopener noreferrer"
45+
>
46+
<ExternalLink />
47+
</a>
48+
</Button>
49+
</div>
50+
51+
<div className="flex flex-wrap items-center justify-center gap-6">
52+
{/* layout / view control */}
53+
<ToggleGroup
54+
type="single"
55+
spacing={2}
56+
variant="outline"
57+
value={view}
58+
onValueChange={(value: View) => {
59+
if (value) setView(value)
60+
}}
3261
>
33-
<ExternalLink />
34-
</a>
35-
</Button>
62+
<ToggleGroupItem value="covers-text" title="Covers and text">
63+
<LayoutList />
64+
</ToggleGroupItem>
65+
<ToggleGroupItem value="covers" title="Covers only">
66+
<LayoutGrid />
67+
</ToggleGroupItem>
68+
<ToggleGroupItem value="text" title="Text only">
69+
<AlignJustify />
70+
</ToggleGroupItem>
71+
</ToggleGroup>
72+
73+
{/* sort select */}
74+
<div className="flex items-center">
75+
Sort
76+
<Select
77+
value={sort ? JSON.stringify(sort) : ''}
78+
onValueChange={(value) => {
79+
setSort(JSON.parse(value))
80+
setPage(1) // reset page to 1 when sort changes
81+
}}
82+
>
83+
<SelectTrigger className="ms-3 w-40">
84+
<SelectValue placeholder="sort" />
85+
</SelectTrigger>
86+
<SelectContent position="popper" align="end">
87+
{sortOptions.map((option) => (
88+
<SelectItem value={JSON.stringify(option)} key={option.value}>
89+
{option.label}
90+
</SelectItem>
91+
))}
92+
</SelectContent>
93+
</Select>
94+
</div>
95+
</div>
3696
</div>
3797

38-
<VinylBrowser user={user} page={page} setPage={setPage} />
98+
<VinylBrowser user={user} page={page} setPage={setPage} view={view} sort={sort} />
3999
</div>
40100

101+
{/* github repo link */}
41102
<div className="bottom-4 left-4 text-center max-[1680px]:mt-8 min-[1680px]:fixed">
42103
<a
43104
href="https://github.com/davidlyons/discogs"

‎src/components/PaginationRow.tsx‎

Lines changed: 6 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -18,21 +18,11 @@ import {
1818
SelectValue,
1919
} from '@/components/ui/select'
2020

21-
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
22-
import { LayoutGrid, LayoutList, AlignJustify } from 'lucide-react'
23-
import type { View } from '@/components/VinylBrowser'
24-
25-
import { type SortingOption, sortOptions } from '@/lib/sort'
26-
2721
type PaginationRowProps = {
2822
pagination: PaginationType
2923
perPage: number
3024
setPage: React.Dispatch<React.SetStateAction<number>>
3125
setPerPage: React.Dispatch<React.SetStateAction<number>>
32-
view: View
33-
setView: React.Dispatch<React.SetStateAction<View>>
34-
sort: SortingOption
35-
setSort: React.Dispatch<React.SetStateAction<SortingOption>>
3626
}
3727

3828
type PaginationItemsType = (number | 'start-ellipsis' | 'end-ellipsis')[]
@@ -72,18 +62,12 @@ const getPaginationItems = (current: number, total: number, neighbors = 1): Pagi
7262
return items
7363
}
7464

75-
export const PaginationRow = ({
76-
pagination,
77-
setPage,
78-
perPage,
79-
setPerPage,
80-
view,
81-
setView,
82-
sort,
83-
setSort,
84-
}: PaginationRowProps) => {
65+
export const PaginationRow = ({ pagination, setPage, perPage, setPerPage }: PaginationRowProps) => {
8566
return (
86-
<div className="mb-4 flex flex-wrap items-center justify-between gap-4 text-sm">
67+
<div
68+
className="relative mb-4 flex flex-col flex-wrap items-center justify-between gap-4 text-sm
69+
sm:flex-row"
70+
>
8771
<div>
8872
<Pagination>
8973
<PaginationContent>
@@ -136,7 +120,7 @@ export const PaginationRow = ({
136120
</Pagination>
137121
</div>
138122

139-
<div>
123+
<div className="absolute top-1/2 left-1/2 hidden -translate-1/2 lg:block">
140124
Showing{' '}
141125
<span className="mx-1 font-bold">
142126
{pagination.per_page * (pagination.page - 1) + 1} –{' '}
@@ -172,50 +156,6 @@ export const PaginationRow = ({
172156
</Select>
173157
albums
174158
</div>
175-
176-
{/* layout / view control */}
177-
<ToggleGroup
178-
type="single"
179-
spacing={2}
180-
variant="outline"
181-
value={view}
182-
onValueChange={(value: View) => {
183-
if (value) setView(value)
184-
}}
185-
>
186-
<ToggleGroupItem value="covers-text" title="Covers and text">
187-
<LayoutList />
188-
</ToggleGroupItem>
189-
<ToggleGroupItem value="covers" title="Covers only">
190-
<LayoutGrid />
191-
</ToggleGroupItem>
192-
<ToggleGroupItem value="text" title="Text only">
193-
<AlignJustify />
194-
</ToggleGroupItem>
195-
</ToggleGroup>
196-
197-
{/* sort select */}
198-
<div className="flex items-center">
199-
Sort
200-
<Select
201-
value={sort ? JSON.stringify(sort) : ''}
202-
onValueChange={(value) => {
203-
setSort(JSON.parse(value))
204-
setPage(1) // reset page to 1 when sort changes
205-
}}
206-
>
207-
<SelectTrigger className="ms-3 w-40">
208-
<SelectValue placeholder="sort" />
209-
</SelectTrigger>
210-
<SelectContent position="popper" align="end">
211-
{sortOptions.map((option) => (
212-
<SelectItem value={JSON.stringify(option)} key={option.value}>
213-
{option.label}
214-
</SelectItem>
215-
))}
216-
</SelectContent>
217-
</Select>
218-
</div>
219159
</div>
220160
</div>
221161
)

‎src/components/VinylBrowser.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,26 @@ import { useState } from 'react'
22
import { useQuery } from '@tanstack/react-query'
33
import { getUserCollection } from '@/lib/getUserCollection'
44
import { getRelease } from '@/lib/getRelease'
5-
import { sortOptions } from '@/lib/sort'
65
import { Spinner } from '@/components/ui/spinner'
76
import { PaginationRow } from '@/components/PaginationRow'
87
import { AlbumCoversTextGrid } from '@/components/AlbumCoversTextGrid'
98
import { AlbumCoversGrid } from '@/components/AlbumCoversGrid'
109
import { AlbumTextList } from '@/components/AlbumTextList'
1110
import { AlbumDetails } from '@/components/AlbumDetails'
11+
import type { SortingOption } from '@/lib/sort'
1212

1313
type VinylBrowserProps = {
1414
user: string
1515
page: number
1616
setPage: React.Dispatch<React.SetStateAction<number>>
17+
view: View
18+
sort: SortingOption
1719
}
1820

1921
export type View = 'covers' | 'covers-text' | 'text'
2022

21-
export function VinylBrowser({ user, page, setPage }: VinylBrowserProps) {
23+
export function VinylBrowser({ user, page, setPage, view, sort }: VinylBrowserProps) {
2224
const [perPage, setPerPage] = useState(25)
23-
const [sort, setSort] = useState(sortOptions[0])
24-
const [view, setView] = useState<View>('covers-text')
2525

2626
const [isSheetOpen, setIsSheetOpen] = useState(false)
2727
const [focusedAlbum, setFocusedAlbum] = useState<number | undefined>()
@@ -68,10 +68,6 @@ export function VinylBrowser({ user, page, setPage }: VinylBrowserProps) {
6868
setPage={setPage}
6969
perPage={perPage}
7070
setPerPage={setPerPage}
71-
view={view}
72-
setView={setView}
73-
sort={sort}
74-
setSort={setSort}
7571
/>
7672

7773
{view === 'covers-text' ? (

0 commit comments

Comments
 (0)