feat: fixed header
This commit is contained in:
Henry
@@ -23,52 +23,53 @@ const Popup: React.FC = () => {
|
||||
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"
|
||||
>
|
||||
<Transition
|
||||
show={isOpen}
|
||||
className="flex w-full flex-col items-center space-y-4 sm:items-end"
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
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="p-4">
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0">
|
||||
<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
|
||||
<div className="flex w-full flex-col items-center space-y-4 sm:items-end">
|
||||
<Transition
|
||||
show={isOpen}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
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="p-4">
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0">
|
||||
<HiOutlineExclamationCircle
|
||||
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>
|
||||
</Transition>
|
||||
</Transition>
|
||||
</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 PatternedBackground from "~/components/PatternedBackground";
|
||||
|
||||
import Header from "./components/Header";
|
||||
import Pricing from "./components/Pricing";
|
||||
|
||||
import { api } from "~/utils/api";
|
||||
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">
|
||||
<PatternedBackground />
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<Header isLoggedIn={isLoggedIn} />
|
||||
<div className="flex h-full w-full flex-col">
|
||||
<div className="w-full py-32">
|
||||
<div className="my-10 flex h-full w-full flex-col items-center justify-center ">
|
||||
|
||||
Reference in New Issue
Block a user