75 lines
2.1 KiB
TypeScript
75 lines
2.1 KiB
TypeScript
import { Search } from "lucide-react";
|
|
import { Input } from "./ui/input";
|
|
import { Button } from "./ui/button";
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
|
|
export default function Navbar(props: {
|
|
title: string;
|
|
subTitle?: string;
|
|
subSubTitle?: string;
|
|
}) {
|
|
const { title, subTitle, subSubTitle } = props;
|
|
const titleCondition = subSubTitle
|
|
? "subSubTitle"
|
|
: subTitle
|
|
? "subTitle"
|
|
: "title";
|
|
|
|
return (
|
|
<div className="w-full flex justify-between items-center h-8">
|
|
<div className="flex flex-row">
|
|
<Link href={titleCondition == "title" ? "" : title.split(",")[1]}>
|
|
<h1
|
|
className={`text-md ${
|
|
titleCondition == "title" ? "font-semibold" : "font-light"
|
|
}`}
|
|
>
|
|
{title.split(",")[0]}
|
|
</h1>
|
|
</Link>
|
|
{subTitle && <p className="mx-3">-</p>}
|
|
{subTitle && (
|
|
<Link
|
|
href={titleCondition == "subTitle" ? "" : subTitle.split(",")[1]}
|
|
>
|
|
<h1
|
|
className={`text-md ${
|
|
titleCondition == "subTitle" ? "font-semibold" : "font-light"
|
|
}`}
|
|
>
|
|
{subTitle.split(",")[0]}
|
|
</h1>
|
|
</Link>
|
|
)}
|
|
{subSubTitle && <p className="mx-3">-</p>}
|
|
{subSubTitle && (
|
|
<Link
|
|
href={
|
|
titleCondition == "subSubTitle"
|
|
? "font-light"
|
|
: subSubTitle.split(",")[1]
|
|
}
|
|
>
|
|
s
|
|
<h1
|
|
className={`text-md ${
|
|
titleCondition == "subSubTitle" ? "font-semibold" : ""
|
|
}`}
|
|
>
|
|
{subSubTitle.split(",")[0]}
|
|
</h1>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
<div className="flex flex-row gap-3">
|
|
<div className="relative">
|
|
<Search className="absolute left-2 top-2.5 h-4 w-4 text-gray-500" />
|
|
<Input placeholder="Search" className="pl-8 text-sm h-8 w-48" />
|
|
</div>
|
|
<Button className="h-8">Notif</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|