mirror of
https://github.com/supabase/supabase.git
synced 2026-07-05 01:14:23 +08:00
5754c23abb
* Change all imports in the ui package which import via the @ui shortcut. * Add a new ui-patterns package. Add it to all apps. * Migrate PrivacySettings from ui to ui-patterns. * Migrate ConsentToast from ui to ui-patterns. * Remove providers folder from ui package. * Move GlassPanel. * Migrate IconPanel. * Migrate TweetCard. * Migrate ThemeImage. * Remove LWXCountdownBanner. * Migrate CountdownWidget. * Migrate SchemaTableNode. * Migrate ExpandableVideo. * Migrate ThemeToggle. * Fix bunch of imports in the docs app. * Revert some unnecessary changes. * Expand the README.md. * Fix the tailwind configs, they were using old folder structure. * Fix leftover merge conflicts. * Remove a deleted page in master. --------- Co-authored-by: Terry Sutton <saltcod@gmail.com>
108 lines
3.7 KiB
TypeScript
108 lines
3.7 KiB
TypeScript
import { useTheme } from 'next-themes'
|
|
import Image from 'next/legacy/image'
|
|
import Link from 'next/link'
|
|
import { FC } from 'react'
|
|
import { Button, IconCommand, IconGitHub, IconSearch, SearchButton } from 'ui'
|
|
import { useIsLoggedIn, useIsUserLoading } from 'common'
|
|
import { ThemeToggle } from 'ui-patterns/ThemeToggle'
|
|
|
|
const TopNavBar: FC = () => {
|
|
const isLoggedIn = useIsLoggedIn()
|
|
const isUserLoading = useIsUserLoading()
|
|
const { resolvedTheme } = useTheme()
|
|
|
|
return (
|
|
<nav
|
|
aria-label="top bar"
|
|
className="h-[60px] border-b backdrop-blur backdrop-filter bg bg-opacity-75"
|
|
>
|
|
<div className="px-5 max-w-7xl mx-auto flex gap-3 justify-between items-center h-full">
|
|
<div className="lg:hidden">
|
|
<Link href="/" className=" flex items-center gap-2">
|
|
<Image
|
|
className="cursor-pointer"
|
|
src={
|
|
resolvedTheme?.includes('dark')
|
|
? '/docs/supabase-dark.svg'
|
|
: '/docs/supabase-light.svg'
|
|
}
|
|
width={96}
|
|
height={24}
|
|
alt="Supabase Logo"
|
|
/>
|
|
<span className="font-mono text-sm font-medium text-brand-link">DOCS</span>
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-6">
|
|
<SearchButton className="md:w-full lg:w-96 order-2 lg:order-1">
|
|
<div
|
|
className="
|
|
flex
|
|
group
|
|
items-center
|
|
justify-between
|
|
bg-surface-100
|
|
bg-opacity-75
|
|
hover:bg-surface-200
|
|
hover:bg-opacity-100
|
|
border
|
|
transition
|
|
pl-1.5 md:pl-3 pr-1.5 w-full h-[32px] rounded
|
|
text-foreground-lighter
|
|
"
|
|
>
|
|
<div className="flex items-center space-x-2">
|
|
<IconSearch size={18} strokeWidth={2} />
|
|
<p className="hidden md:flex text-sm">Search docs...</p>
|
|
</div>
|
|
<div className="hidden md:flex items-center space-x-1">
|
|
<div
|
|
aria-hidden="true"
|
|
className="md:flex items-center justify-center h-5 w-10 border rounded bg-surface-300 gap-1"
|
|
>
|
|
<IconCommand size={12} strokeWidth={1.5} />
|
|
<span className="text-[12px]">K</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SearchButton>
|
|
</div>
|
|
<div className="hidden lg:flex grow items-center justify-end gap-3">
|
|
<Button type="text" asChild>
|
|
<a href="https://supabase.com" target="_blank" rel="noreferrer noopener">
|
|
Supabase.com
|
|
</a>
|
|
</Button>
|
|
{!isUserLoading && (
|
|
<Button asChild>
|
|
<a href="https://supabase.com/dashboard" target="_blank" rel="noreferrer noopener">
|
|
{isLoggedIn ? 'Dashboard' : 'Sign up'}
|
|
</a>
|
|
</Button>
|
|
)}
|
|
{process.env.NEXT_PUBLIC_DEV_AUTH_PAGE === 'true' && (
|
|
<Button asChild>
|
|
<Link href="/__dev-secret-auth">Dev-only secret sign-in</Link>
|
|
</Button>
|
|
)}
|
|
<Link
|
|
href="https://github.com/supabase/supabase"
|
|
target="_blank"
|
|
rel="noreferrer noopener"
|
|
className="px-2.5 py-1"
|
|
>
|
|
<span className="sr-only">GitHub</span>
|
|
<IconGitHub
|
|
size={16}
|
|
className="text-foreground-light hover:text-foreground transition"
|
|
/>
|
|
</Link>
|
|
<ThemeToggle />
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|
|
export default TopNavBar
|