feat: actionlist sorting via switch

Author: mvriu5

src/components/cards/ActionCard.tsx

@@ -13,7 +13,7 @@ export function ActionCard({ action, locale }: { action: ActionItem; locale: App
         <Link href={`/${locale}/actions/${action.slug}`} className="block aspect-square w-full">
             <Card size="lg" variant="light" className="@container size-full p-4! transition-colors hover:bg-white/10">
                 <div className="relative z-10 flex h-full min-w-0 flex-col items-center justify-center gap-4 text-center">
-                    {action.icon && <ActionIcon icon={action.icon} size="clamp(3rem, 22cqi, 4rem)" />}
+                    {action.icon && <ActionIcon icon={action.icon} size="clamp(4rem, 22cqi, 4rem)" />}
                     <h2 className="max-w-full whitespace-nowrap font-semibold leading-tight text-white" style={{ fontSize: `clamp(0.625rem, calc((100cqi - 2rem) / ${titleScale}), 1.25rem)` }}>
                         {action.title}
                     </h2>

src/components/sections/ActionListSection.tsx

@@ -6,6 +6,7 @@ import { cn } from "@/lib/utils"
 import { Button, Menu, MenuContent, MenuItem, MenuTrigger, TextInput } from "@code0-tech/pictor"
 import { IconChevronDown, IconSearch } from "@tabler/icons-react"
 import { Section } from "@/components/ui/Section"
+import { Switch, type SwitchOption } from "@/components/ui/Switch"
 import type { ChangeEvent } from "react"
 import { useMemo, useState } from "react"
 
@@ -64,6 +65,10 @@ export function ActionListSection({ actions, locale, content }: { actions: Actio
     const allCategoriesLabel = content.allCategoriesLabel || "All Categories"
     const selectedCategory = CATEGORY_LABEL_KEYS.find(({ tag }) => tag === selectedTag)
     const selectedCategoryLabel = selectedCategory ? content.categoryLabels?.[selectedCategory.label] || selectedCategory.tag : allCategoriesLabel
+    const sortOptions: SwitchOption<SortOrder>[] = [
+        { value: "newest", label: content.sortNewestLabel },
+        { value: "oldest", label: content.sortOldestLabel },
+    ]
     const filteredActions = useMemo(() => {
         const term = search.trim().toLowerCase()
         return actions
@@ -88,7 +93,7 @@ export function ActionListSection({ actions, locale, content }: { actions: Actio
             headingLevel={1}
         >
             <div className="flex flex-col gap-4">
-                <div className="flex flex-col gap-2 sm:gap-4 sm:flex-row">
+                <div className="flex flex-row gap-2 sm:gap-4">
                     <div className="min-w-0 flex-1">
                         <TextInput
                             value={search}
@@ -99,18 +104,7 @@ export function ActionListSection({ actions, locale, content }: { actions: Actio
                             className="w-full! text-white!"
                         />
                     </div>
-                    <Menu modal={false}>
-                        <MenuTrigger asChild>
-                            <Button className="w-full! justify-between sm:w-auto! sm:min-w-36">
-                                {sortOrder === "newest" ? content.sortNewestLabel : content.sortOldestLabel}
-                                <IconChevronDown size={16} />
-                            </Button>
-                        </MenuTrigger>
-                        <MenuContent className="w-(--radix-dropdown-menu-trigger-width)">
-                            <MenuItem onClick={() => setSortOrder("newest")}>{content.sortNewestLabel}</MenuItem>
-                            <MenuItem onClick={() => setSortOrder("oldest")}>{content.sortOldestLabel}</MenuItem>
-                        </MenuContent>
-                    </Menu>
+                    <Switch value={sortOrder} options={sortOptions} onChange={setSortOrder} className="w-auto shrink-0 [&>div]:h-10.5 [&>div>button]:py-0" fitContent />
                 </div>
             </div>
             <div className="grid items-start gap-6 md:grid-cols-[13rem_minmax(0,1fr)]">