Skip to content

Commit

Permalink
feat: design categories list
Browse files Browse the repository at this point in the history
  • Loading branch information
mickasmt committed Sep 12, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 2f89a01 commit 6f39cb1
Showing 2 changed files with 38 additions and 35 deletions.
69 changes: 36 additions & 33 deletions src/components/blog-header.astro
Original file line number Diff line number Diff line change
@@ -2,6 +2,7 @@
import { buttonVariants } from "@/components/ui/button";
import { getCategories } from "@/lib/fetchers";
import { cn } from "@/lib/utils";
import Icon from "astro-icon";
const categories = await getCategories();
@@ -16,48 +17,50 @@ const { category } = Astro.params;
<h1 class="inline-block font-heading text-4xl">{title}</h1>

<div
class="flex max-md:flex-col items-start md:items-center justify-between my-6 max-md:gap-3"
class="flex items-start justify-between my-6 max-md:gap-4"
>
<span
class="flex items-center w-full md:max-w-xs lg:max-w-sm h-10 rounded-md px-3 border text-muted-foreground"
>Search (coming soon)</span
>
<span class="flex items-center lg:w-full max-w-xs h-10 rounded-md px-2 lg:px-3 border text-muted-foreground">
<Icon name="ri:search-line" class="h-6 w-6" />
<span class="ml-2 hidden lg:flex">Search (coming soon)</span>
</span>

<ul class="flex items-center max-md:w-full space-x-2 lg:space-x-3">
<li>
<a
href={`/blog`}
class={cn(
!category ? "select-none" : "",
buttonVariants({
variant: !category ? "default" : "outline",
size: "sm",
})
)}
>
All posts
</a>
</li>
{
categories.map((item) => (
<li>
{
categories?.length ? (
<ul class="flex snap-x snap-mandatory overflow-auto items-center space-x-2 lg:space-x-2.5 pb-2">
<li class="flex-shrink-0 snap-start">
<a
href={`/blog/category/${item}`}
href={`/blog`}
class={cn(
"capitalize",
item === category ? "select-none" : "",
!category ? "select-none" : "",
buttonVariants({
variant: item === category ? "default" : "outline",
size: "sm",
variant: !category ? "default" : "outline"
})
)}
>
{item}
All posts
</a>
</li>
))
}
</ul>
{categories.map((item) => (
<li class="flex-shrink-0 snap-start">
<a
href={`/blog/category/${item}`}
class={cn(
"capitalize",
item === category ? "select-none" : "",
buttonVariants({
variant: item === category ? "default" : "outline"
})
)}
>
{item}
</a>
</li>
))}
</ul>
) : (
<div />
)
}
</div>

<hr class="mb-8" />
<hr class="mb-7" />
4 changes: 2 additions & 2 deletions src/components/layout/sheet-mobile-nav.tsx
Original file line number Diff line number Diff line change
@@ -24,9 +24,9 @@ export function SheetMobileNav() {
<Sheet open={open} onOpenChange={setOpen}>
<SheetTrigger asChild>
<Button
variant="outline"
variant="secondary"
size="sm"
className="mr-2 px-1.5 md:hidden"
className="mr-2 h-8 px-1.5 md:hidden"
>
<Icons.hamburger className="h-5 w-5" />
<span className="sr-only">Toggle Menu</span>

0 comments on commit 6f39cb1

Please sign in to comment.