59 lines
2.6 KiB
TypeScript
59 lines
2.6 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
|
||
export default function AcademyHeader() {
|
||
const [activeFilter, setActiveFilter] = useState("همه مقالات");
|
||
const filters = ["همه مقالات", "شبکه", "امنیت", "برنامهنویسی", "DevOps"];
|
||
|
||
return (
|
||
<div className="flex flex-col items-center mb-12 text-center md:mb-20">
|
||
<div className="bg-accent/10 border border-accent/20 text-accent px-4 py-1.5 rounded-full text-xs mb-6 flex items-center gap-2">
|
||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
|
||
/>
|
||
</svg>
|
||
آکادمی رابین شبکه
|
||
</div>
|
||
|
||
<h1 className="mb-4 text-3xl font-bold md:text-5xl lg:text-6xl">
|
||
دانش و تجربه
|
||
<span className="block mt-2 text-accent">به اشتراک گذاشته شده</span>
|
||
</h1>
|
||
|
||
<p className="max-w-2xl mb-10 text-sm text-muted md:text-base">مقالات تخصصی، آموزشها و تجربیات واقعی از پروژههای شبکه و نرمافزار</p>
|
||
|
||
<div className="relative w-full max-w-2xl mb-12">
|
||
<input
|
||
type="text"
|
||
placeholder="جستجو در مقالات..."
|
||
className="w-full px-6 py-4 text-sm transition border bg-panel border-border rounded-xl focus:outline-none focus:border-accent"
|
||
/>
|
||
<svg className="absolute w-5 h-5 -translate-y-1/2 text-muted left-4 top-1/2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||
</svg>
|
||
</div>
|
||
|
||
<div className="flex flex-wrap justify-center gap-2 md:gap-4">
|
||
{filters.map((filter) => (
|
||
<button
|
||
key={filter}
|
||
onClick={() => setActiveFilter(filter)}
|
||
className={`px-4 py-2 rounded-lg text-sm transition-all border ${
|
||
activeFilter === filter
|
||
? "bg-accent border-accent text-background font-bold shadow-[0_0_15px_rgba(232,107,53,0.3)]"
|
||
: "bg-panel border-border text-muted hover:border-accent/50 hover:text-foreground"
|
||
}`}
|
||
>
|
||
{filter}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|