shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: hero image theme

Browse Source
This commit is contained in:
Henry
2024-11-25 22:59:25 +00:00
parent 8984790b5e
commit 1fd7900f24
3 changed files with 104 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/hero-dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 400 KiB

0
public/hero.png → public/hero-light.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 433 KiB

After

Width:  |  Height:  |  Size: 433 KiB

22
src/views/home/index.tsx
View File

@@ -1,15 +1,18 @@
import Link from "next/link"; import Link from "next/link";
import Image from "next/image"; import Image from "next/image";
import Cookies from "js-cookie"; import Cookies from "js-cookie";
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 { api } from "~/utils/api"; import { api } from "~/utils/api";
import { env } from "~/env.mjs"; import { env } from "~/env.mjs";
import { IoLogoGithub } from "react-icons/io"; import { useTheme } from "~/providers/theme";
export default function HomeView() { export default function HomeView() {
const theme = useTheme();
const token = const token =
typeof window !== "undefined" typeof window !== "undefined"
? Cookies.get(env.NEXT_PUBLIC_SUPABASE_AUTH_COOKIE_NAME) ? Cookies.get(env.NEXT_PUBLIC_SUPABASE_AUTH_COOKIE_NAME)
@@ -22,6 +25,14 @@ export default function HomeView() {
const isLoggedIn = !!data; const isLoggedIn = !!data;
return ( return (
<>
<style jsx global>{`
body {
background-color: ${theme.theme === "light"
? "hsl(0deg 0% 98.8%)"
: "#161616"};
}
`}</style>
<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]">
@@ -102,11 +113,11 @@ export default function HomeView() {
</p> </p>
</div> </div>
</div> </div>
<div className="mb-10 rounded-[24px] border border-light-300 bg-light-50 p-2 shadow-md"> <div className="mb-10 rounded-[24px] border border-light-300 bg-light-50 p-2 shadow-md dark:border-dark-300 dark:bg-dark-50">
<div className="rounded-[16px] border border-light-300 bg-light-200 p-2"> <div className="rounded-[16px] border border-light-300 bg-light-200 p-2 dark:border-dark-300 dark:bg-dark-200">
<div className="overflow-hidden rounded-[16px] shadow-sm"> <div className="overflow-hidden rounded-[16px] shadow-sm">
<Image <Image
src="/hero.png" src={`/hero-${theme.theme}.png`}
alt="kanban" alt="kanban"
width={1100} width={1100}
height={1000} height={1000}
@@ -115,7 +126,7 @@ export default function HomeView() {
</div> </div>
</div> </div>
<div className="flex flex-col items-center justify-center pb-10"> <div className="flex flex-col items-center justify-center pb-10">
<div className="flex items-center gap-2 rounded-full border bg-light-50 px-4 py-1 text-center text-sm text-light-1000 dark:bg-dark-50 dark:text-dark-1000"> <div className="flex items-center gap-2 rounded-full border bg-light-50 px-4 py-1 text-center text-sm text-light-1000 dark:border-dark-300 dark:bg-dark-50 dark:text-dark-900">
<p> <p>
We are currently building the product and will be launching We are currently building the product and will be launching
soon. soon.
@@ -125,5 +136,6 @@ export default function HomeView() {
</div> </div>
</div> </div>
</div> </div>
</>
); );
} }