58 lines
2.0 KiB
TypeScript
58 lines
2.0 KiB
TypeScript
import { useState } from "react";
|
|
import Button from "@/components/Button";
|
|
import ModalPlan from "@/components/ModalPlan";
|
|
import Icon from "@/components/Icon";
|
|
import SpecialOffer from "./SpecialOffer";
|
|
|
|
type Props = {
|
|
onOpenSidebar: () => void;
|
|
onToggleTools: () => void;
|
|
};
|
|
|
|
const Header = ({ onOpenSidebar, onToggleTools }: Props) => {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
<div className="flex items-center gap-4 mb-3.5 max-md:gap-2 max-md:mb-3">
|
|
<button
|
|
className="hidden size-10 mr-2 justify-center items-center max-lg:flex max-md:mr-0"
|
|
onClick={onOpenSidebar}
|
|
>
|
|
<Icon className="!size-6 fill-strong-950" name="burger" />
|
|
</button>
|
|
<div className="grow">
|
|
<div className="text-label-xl max-md:text-label-md">
|
|
Chat With AI
|
|
</div>
|
|
<div className="mt-1 line-clamp-1 text-label-md text-sub-600 max-lg:hidden">
|
|
Break down lengthy texts into concise summaries to
|
|
grasp.
|
|
</div>
|
|
</div>
|
|
<div className="flex shrink-0 gap-1.5">
|
|
<Button
|
|
className="max-md:hidden"
|
|
icon="flash"
|
|
isBlack
|
|
onClick={() => setOpen(true)}
|
|
>
|
|
Upgrade
|
|
</Button>
|
|
<Button icon="help-circle" isStroke isCircle />
|
|
<SpecialOffer />
|
|
<Button
|
|
icon="wrench"
|
|
isStroke
|
|
isCircle
|
|
onClick={onToggleTools}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<ModalPlan open={open} onClose={() => setOpen(false)} />
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Header;
|