wassname/Open-Assistant
1
0
Fork 0
mirror of https://github.com/wassname/Open-Assistant.git synced 2026-09-12 12:03:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #788 from rsandb/Convert-Header-to-Chakra-Components

Browse Source 
convert header to chakra components
This commit is contained in:
Keith Stevens
2023-01-17 11:36:34 +09:00
committed by GitHub
parent dc64980351 57878bc123
commit c912caaf76
2 changed files with 19 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/components/Header/Header.tsx
+18 -21
View File
@@ -1,4 +1,4 @@
import { Box, Button, Text, useColorMode } from "@chakra-ui/react"; import { Box, Button, Text, Flex } from "@chakra-ui/react";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { useSession } from "next-auth/react"; import { useSession } from "next-auth/react";
@@ -13,10 +13,12 @@ function AccountButton() {
return; return;
} }
return ( return (
<Link href="/auth/signin" aria-label="Home" className="flex items-center"> <Link href="/auth/signin" aria-label="Home">
<Button variant="outline" leftIcon={<FaUser />}> <Flex alignItems="center">
Sign in <Button variant="outline" leftIcon={<FaUser />}>
</Button> Sign in
</Button>
</Flex>
</Link> </Link>
); );
} }
@@ -25,30 +27,25 @@ export function Header(props) {
const { data: session } = useSession(); const { data: session } = useSession();
const homeURL = session ? "/dashboard" : "/"; const homeURL = session ? "/dashboard" : "/";
const { colorMode } = useColorMode();
const borderClass = props.transparent
? ""
: colorMode === "light"
? "border-b border-gray-400"
: "border-b border-zinc-800";
return ( return (
<nav className={`oa-basic-theme ${borderClass}`}> <nav className="oa-basic-theme">
<Box className="relative z-10 flex justify-between px-4 py-4"> <Box display="flex" justifyContent="space-between" p="4">
<div className="relative z-10 flex items-center gap-10"> <Link href={homeURL} aria-label="Home">
<Link href={homeURL} aria-label="Home" className="flex items-center"> <Flex alignItems="center">
<Image src="/images/logos/logo.svg" className="mx-auto object-fill" width="50" height="50" alt="logo" /> <Image src="/images/logos/logo.svg" className="mx-auto object-fill" width="50" height="50" alt="logo" />
<Text fontFamily="inter" fontSize="2xl" fontWeight="bold" className="ml-3"> <Text fontFamily="inter" fontSize="2xl" fontWeight="bold" ml="3">
Open Assistant Open Assistant
</Text> </Text>
</Link> </Flex>
</div> </Link>
<div className="flex items-center gap-4">
<Flex alignItems="center" gap="4">
<Flags authorizedFlags={["flagTest"]}> <Flags authorizedFlags={["flagTest"]}>
<div>FlagTest</div> <Text>FlagTest</Text>
</Flags> </Flags>
<AccountButton /> <AccountButton />
<UserMenu /> <UserMenu />
</div> </Flex>
</Box> </Box>
</nav> </nav>
); );
website/src/components/Hero.tsx
+1 -1
View File
@@ -65,7 +65,7 @@ export function Hero() {
<div className="overflow-hidden py-20 sm:py-32 lg:pb-32 xl:pb-36"> <div className="overflow-hidden py-20 sm:py-32 lg:pb-32 xl:pb-36">
<Container className=""> <Container className="">
<div className="lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20"> <div className="lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
<div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6"> <div className="relative mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
<h1 className="text-5xl mb-6 font-bold tracking-tight">Open Assistant</h1> <h1 className="text-5xl mb-6 font-bold tracking-tight">Open Assistant</h1>
<p <p
className={`bg-gradient-to-r ${fancyTextGradientClasses} mt-8 text-3xl inline bg-clip-text font-display tracking-tight text-transparent`} className={`bg-gradient-to-r ${fancyTextGradientClasses} mt-8 text-3xl inline bg-clip-text font-display tracking-tight text-transparent`}