mmintel/mintel.me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ultra-aggressive mobile spacing refinement & native fidelity navigation redesign

Browse Source
This commit is contained in:
Marc Mintel
2026-02-15 20:15:04 +01:00
parent 6244425551
commit cb32b9d62f
19 changed files with 722 additions and 376 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
apps/web/src/components/blog/BlogCommandBar.tsx
View File

@@ -24,30 +24,30 @@ export const BlogCommandBar: React.FC<BlogCommandBarProps> = ({
return (
<div
className={cn(
"w-full max-w-2xl mx-auto flex flex-col items-center space-y-6 px-4 md:px-0",
"w-full max-w-2xl mx-auto flex flex-col items-center space-y-4 md:space-y-6 px-0",
className,
)}
>
{/* Command Input Area */}
<div className="relative group w-full">
<div className="relative group w-full px-0 sm:px-4 md:px-0">
{/* Glow Effect */}
<div className="absolute -inset-0.5 bg-gradient-to-r from-slate-200 to-slate-100 rounded-2xl blur opacity-30 group-hover:opacity-100 transition duration-500" />
<div className="absolute -inset-0.5 bg-gradient-to-r from-slate-200 to-slate-100 rounded-2xl blur opacity-20 group-hover:opacity-100 transition duration-500" />
<div className="relative flex items-center bg-white rounded-2xl border border-slate-200 p-2 shadow-sm transition-all focus-within:ring-2 focus-within:ring-slate-100 focus-within:border-slate-300">
<div className="pl-4 text-slate-400">
<Search className="w-5 h-5" />
<div className="relative flex items-center bg-white rounded-2xl border border-slate-200 p-1.5 md:p-2 shadow-sm transition-all focus-within:ring-2 focus-within:ring-slate-100 focus-within:border-slate-300">
<div className="pl-3 md:pl-4 text-slate-400">
<Search className="w-4 h-4 md:w-5 md:h-5" />
</div>
<input
type="text"
value={searchQuery}
onChange={(e) => onSearchChange(e.target.value)}
placeholder="Search posts..."
className="w-full bg-transparent px-4 py-3 text-lg text-slate-900 placeholder:text-slate-300 outline-none font-bold"
className="w-full bg-transparent px-3 md:px-4 py-2 md:py-3 text-base md:text-lg text-slate-900 placeholder:text-slate-300 outline-none font-bold"
/>
{searchQuery && (
<button
onClick={() => onSearchChange("")}
className="mr-2 px-3 py-1.5 bg-slate-100 hover:bg-slate-200 rounded-lg text-[10px] font-bold uppercase tracking-wider text-slate-500 hover:text-slate-900 transition-colors"
className="mr-2 px-2.5 py-1 md:px-3 md:py-1.5 bg-slate-100 hover:bg-slate-200 rounded-lg text-[9px] md:text-[10px] font-bold uppercase tracking-wider text-slate-500 hover:text-slate-900 transition-colors"
>
Clear
</button>
@@ -56,7 +56,7 @@ export const BlogCommandBar: React.FC<BlogCommandBarProps> = ({
</div>
{/* Tag Command Row */}
<div className="flex flex-wrap items-center justify-center gap-2">
<div className="flex flex-wrap items-center justify-center gap-1.5 md:gap-2 px-4 md:px-0">
{tags.map((tag) => {
const isActive = activeTags.includes(tag);
return (
@@ -64,7 +64,7 @@ export const BlogCommandBar: React.FC<BlogCommandBarProps> = ({
key={tag}
onClick={() => onTagToggle(tag)}
className={cn(
"px-3 py-1.5 rounded-lg text-[10px] font-mono uppercase tracking-wider border transition-all duration-200 select-none",
"px-2.5 py-1 md:px-3 md:py-1.5 rounded-lg text-[9px] md:text-[10px] font-mono uppercase tracking-wider border transition-all duration-200 select-none",
isActive
? "bg-slate-900 text-white border-slate-900 shadow-md transform scale-105"
: "bg-white text-slate-500 border-slate-200 hover:border-slate-400 hover:text-slate-900 hover:bg-slate-50",