pablo/logipedia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

article filter bar mobile responsive

Browse Source
This commit is contained in:
mr-shortman 2025-03-15 11:59:00 +01:00
parent 0f7bf09676
commit 38b43174ec
2 changed files with 32 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/article/article-filter-bar.tsx
View File

@ -54,7 +54,7 @@ function ArticleFilterBar({
<> <>
<div <div
className={cn( className={cn(
"flex w-full items-center justify-center gap-2 rounded-md border bg-background p-2", "flex w-full flex-col-reverse items-center justify-center gap-2 rounded-md border bg-background p-2 lg:flex-row lg:gap-4",
className, className,
)} )}
> >
@ -70,35 +70,37 @@ function ArticleFilterBar({
placeholder="Artikel Suche..." placeholder="Artikel Suche..."
/> />
</div> </div>
<CategorySelect <div className="flex w-full flex-col gap-2 sm:flex-row">
className="w-full max-w-xs" <CategorySelect
onSelect={(category) => { className="w-full"
onFilterChange({ onSelect={(category) => {
category: category?.length ? category : undefined, onFilterChange({
}); category: category?.length ? category : undefined,
}} });
buttonProps={{ }}
size: "sm", buttonProps={{
}} size: "sm",
/> }}
<Combobox />
hideSearch <Combobox
data={sortItems} hideSearch
initialValue={filter.sort} data={sortItems}
onSelect={(currentValue) => { initialValue={filter.sort}
onFilterChange({ onSelect={(currentValue) => {
sort: currentValue?.length ? currentValue : undefined, onFilterChange({
}); sort: currentValue?.length ? currentValue : undefined,
}} });
className="w-full max-w-64" }}
messageUi={{ className="w-full"
selectIcon: FilterIcon, messageUi={{
select: "Sortieren", selectIcon: FilterIcon,
}} select: "Sortieren",
buttonProps={{ }}
size: "sm", buttonProps={{
}} size: "sm",
/> }}
/>
</div>
</div> </div>
</> </>
); );

3
src/components/combobox.tsx
View File

@ -121,9 +121,6 @@ export function Combobox({
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{item?.Icon && <item.Icon className="ml-auto opacity-50" />} {item?.Icon && <item.Icon className="ml-auto opacity-50" />}
<span>{item.label}</span> <span>{item.label}</span>
{/* <span className="text-xs text-muted-foreground">
{value === item.value && "ausgewählt"}
</span> */}
</div> </div>
<Check <Check
className={cn( className={cn(