feat: fixed header
This commit is contained in:
Henry
@@ -23,52 +23,53 @@ const Popup: React.FC = () => {
|
|||||||
aria-live="assertive"
|
aria-live="assertive"
|
||||||
className="pointer-events-none fixed inset-0 z-10 flex items-end px-4 py-6 sm:items-end sm:p-6"
|
className="pointer-events-none fixed inset-0 z-10 flex items-end px-4 py-6 sm:items-end sm:p-6"
|
||||||
>
|
>
|
||||||
<Transition
|
<div className="flex w-full flex-col items-center space-y-4 sm:items-end">
|
||||||
show={isOpen}
|
<Transition
|
||||||
className="flex w-full flex-col items-center space-y-4 sm:items-end"
|
show={isOpen}
|
||||||
enter="ease-out duration-300"
|
enter="ease-out duration-300"
|
||||||
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||||
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
||||||
leave="ease-in duration-200"
|
leave="ease-in duration-200"
|
||||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||||
>
|
>
|
||||||
<div className="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg border border-light-400 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 transition data-[closed]:data-[enter]:translate-y-2 data-[enter]:transform data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-100 data-[enter]:ease-out data-[leave]:ease-in dark:border-dark-300 dark:bg-dark-200 data-[closed]:data-[enter]:sm:translate-x-2 data-[closed]:data-[enter]:sm:translate-y-0">
|
<div className="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg border border-light-400 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 transition data-[closed]:data-[enter]:translate-y-2 data-[enter]:transform data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-100 data-[enter]:ease-out data-[leave]:ease-in dark:border-dark-300 dark:bg-dark-200 data-[closed]:data-[enter]:sm:translate-x-2 data-[closed]:data-[enter]:sm:translate-y-0">
|
||||||
<div className="p-4">
|
<div className="p-4">
|
||||||
<div className="flex items-start">
|
<div className="flex items-start">
|
||||||
<div className="flex-shrink-0">
|
<div className="flex-shrink-0">
|
||||||
<HiOutlineExclamationCircle
|
<HiOutlineExclamationCircle
|
||||||
aria-hidden="true"
|
|
||||||
className="h-6 w-6 text-red-400"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="ml-3 w-0 flex-1 pt-0.5">
|
|
||||||
<p className="text-sm font-medium text-neutral-900 dark:text-dark-1000">
|
|
||||||
{popupHeader}
|
|
||||||
</p>
|
|
||||||
<p className="mt-1 text-sm text-neutral-500 dark:text-dark-900">
|
|
||||||
{popupMessage}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="ml-4 flex flex-shrink-0">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => {
|
|
||||||
hidePopup();
|
|
||||||
}}
|
|
||||||
className="mx-1 inline-flex h-fit items-center rounded-md p-1 px-1 text-sm font-semibold text-dark-50 hover:bg-light-100 dark:hover:bg-dark-400"
|
|
||||||
>
|
|
||||||
<span className="sr-only">Close</span>
|
|
||||||
<HiXMark
|
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
className="h-5 w-5 text-dark-900"
|
className="h-6 w-6 text-red-400"
|
||||||
/>
|
/>
|
||||||
</button>
|
</div>
|
||||||
|
<div className="ml-3 w-0 flex-1 pt-0.5">
|
||||||
|
<p className="text-sm font-medium text-neutral-900 dark:text-dark-1000">
|
||||||
|
{popupHeader}
|
||||||
|
</p>
|
||||||
|
<p className="mt-1 text-sm text-neutral-500 dark:text-dark-900">
|
||||||
|
{popupMessage}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="ml-4 flex flex-shrink-0">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => {
|
||||||
|
hidePopup();
|
||||||
|
}}
|
||||||
|
className="mx-1 inline-flex h-fit items-center rounded-md p-1 px-1 text-sm font-semibold text-dark-50 hover:bg-light-100 dark:hover:bg-dark-400"
|
||||||
|
>
|
||||||
|
<span className="sr-only">Close</span>
|
||||||
|
<HiXMark
|
||||||
|
aria-hidden="true"
|
||||||
|
className="h-5 w-5 text-dark-900"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Transition>
|
||||||
</Transition>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
72
src/views/home/components/Header.tsx
Normal file
72
src/views/home/components/Header.tsx
Normal file
@@ -0,0 +1,72 @@
|
|||||||
|
import { useState, useEffect } from "react";
|
||||||
|
import Link from "next/link";
|
||||||
|
import Button from "~/components/Button";
|
||||||
|
import { twMerge } from "tailwind-merge";
|
||||||
|
|
||||||
|
const Header = ({ isLoggedIn }: { isLoggedIn: boolean }) => {
|
||||||
|
const [isScrolled, setIsScrolled] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleScroll = () => {
|
||||||
|
setIsScrolled(window.scrollY > 0);
|
||||||
|
};
|
||||||
|
window.addEventListener("scroll", handleScroll);
|
||||||
|
return () => window.removeEventListener("scroll", handleScroll);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
className={twMerge(
|
||||||
|
"z-50 m-auto flex w-full max-w-[1100px] px-4 pt-4",
|
||||||
|
isScrolled && "fixed",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={twMerge(
|
||||||
|
"m-auto flex h-[4rem] min-h-[4rem] w-full rounded-3xl border border-transparent px-5 py-2 align-middle transition-colors duration-200",
|
||||||
|
isScrolled &&
|
||||||
|
"rounded-2xl border border-light-300 bg-dark-100 bg-light-50/80 shadow-sm backdrop-blur-[10px] dark:border-dark-300 dark:bg-dark-50/90",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="flex w-full items-center justify-between px-2">
|
||||||
|
<div className="my-auto flex items-center justify-between pl-2">
|
||||||
|
<h1 className="w-[200px] text-lg font-bold tracking-tight text-neutral-900 dark:text-dark-1000">
|
||||||
|
kan.bn
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-center gap-10 dark:text-dark-1000">
|
||||||
|
<Link href="/roadmap" className="text-sm font-bold">
|
||||||
|
Roadmap
|
||||||
|
</Link>
|
||||||
|
<Link href="#features" className="text-sm font-bold">
|
||||||
|
Features
|
||||||
|
</Link>
|
||||||
|
<Link href="#pricing" className="text-sm font-bold">
|
||||||
|
Pricing
|
||||||
|
</Link>
|
||||||
|
<Link href="/docs" className="text-sm font-bold">
|
||||||
|
Docs
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className="flex w-[200px] justify-end gap-2">
|
||||||
|
{isLoggedIn ? (
|
||||||
|
<Button href="/boards">Go to app</Button>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Button href="/login" variant="ghost">
|
||||||
|
Sign in
|
||||||
|
</Button>
|
||||||
|
<Button href="/signup">Get started</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{isScrolled && <div className="h-[4rem] min-h-[4rem]"></div>}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Header;
|
||||||
@@ -6,7 +6,9 @@ import { IoLogoGithub } from "react-icons/io";
|
|||||||
import Button from "~/components/Button";
|
import Button from "~/components/Button";
|
||||||
import PatternedBackground from "~/components/PatternedBackground";
|
import PatternedBackground from "~/components/PatternedBackground";
|
||||||
|
|
||||||
|
import Header from "./components/Header";
|
||||||
import Pricing from "./components/Pricing";
|
import Pricing from "./components/Pricing";
|
||||||
|
|
||||||
import { api } from "~/utils/api";
|
import { api } from "~/utils/api";
|
||||||
import { env } from "~/env.mjs";
|
import { env } from "~/env.mjs";
|
||||||
|
|
||||||
@@ -38,40 +40,7 @@ export default function HomeView() {
|
|||||||
<div className="mx-auto flex h-full min-h-screen flex-col items-center bg-light-100 dark:bg-dark-50">
|
<div className="mx-auto flex h-full min-h-screen flex-col items-center bg-light-100 dark:bg-dark-50">
|
||||||
<PatternedBackground />
|
<PatternedBackground />
|
||||||
<div className="z-10 mx-auto h-full w-full max-w-[1100px]">
|
<div className="z-10 mx-auto h-full w-full max-w-[1100px]">
|
||||||
<div className="m-auto flex h-24 min-h-24 w-full items-center justify-between px-5 py-2 align-middle dark:border-dark-400">
|
<Header isLoggedIn={isLoggedIn} />
|
||||||
<div className="my-auto flex items-center justify-between">
|
|
||||||
<h1 className="w-[100px] text-xl font-bold tracking-tight text-neutral-900 dark:text-dark-1000">
|
|
||||||
kan.bn
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
<div className="flex w-full justify-center gap-10 dark:text-dark-1000">
|
|
||||||
<Link href="/roadmap" className="text-sm font-bold">
|
|
||||||
Roadmap
|
|
||||||
</Link>
|
|
||||||
<Link href="#features" className="text-sm font-bold">
|
|
||||||
Features
|
|
||||||
</Link>
|
|
||||||
<Link href="#pricing" className="text-sm font-bold">
|
|
||||||
Pricing
|
|
||||||
</Link>
|
|
||||||
<Link href="/docs" className="text-sm font-bold">
|
|
||||||
Docs
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
<div className="flex w-[100px] gap-2">
|
|
||||||
{isLoggedIn ? (
|
|
||||||
<Button href="/boards">Go to app</Button>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Button href="/login" variant="ghost">
|
|
||||||
Sign in
|
|
||||||
</Button>
|
|
||||||
<Button href="/signup">Get started</Button>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex h-full w-full flex-col">
|
<div className="flex h-full w-full flex-col">
|
||||||
<div className="w-full py-32">
|
<div className="w-full py-32">
|
||||||
<div className="my-10 flex h-full w-full flex-col items-center justify-center ">
|
<div className="my-10 flex h-full w-full flex-col items-center justify-center ">
|
||||||
|
|||||||
Reference in New Issue
Block a user