manifold/web/components/nav/manifold-logo.tsx

62 lines
1.6 KiB
TypeScript
Raw Permalink Normal View History

import Link from 'next/link'
import clsx from 'clsx'
import { useUser } from 'web/hooks/use-user'
import { ENV_CONFIG } from 'common/envs/constants'
2022-01-23 00:16:23 +00:00
2022-01-18 19:16:35 +00:00
export function ManifoldLogo(props: {
className?: string
darkBackground?: boolean
hideText?: boolean
twoLine?: boolean
2022-01-18 19:16:35 +00:00
}) {
const { darkBackground, className, hideText, twoLine } = props
2022-01-23 00:16:23 +00:00
const user = useUser()
return (
2022-01-23 00:16:23 +00:00
<Link href={user ? '/home' : '/'}>
<a className={clsx('group flex flex-shrink-0 flex-row gap-4', className)}>
2022-07-04 00:03:40 +00:00
{!ENV_CONFIG.navbarLogoPath && (
<img
className="transition-all group-hover:rotate-12"
src={darkBackground ? '/logo-white.svg' : '/logo.svg'}
width={45}
height={45}
/>
)}
{!hideText &&
(ENV_CONFIG.navbarLogoPath ? (
2022-07-04 00:03:40 +00:00
<img
className="rounded-md bg-gradient-to-r from-cyan-500 to-sky-600 p-2"
src={ENV_CONFIG.navbarLogoPath}
width={350}
height={80}
/>
) : twoLine ? (
<div
className={clsx(
'font-major-mono mt-1 text-lg lowercase text-gray-900',
darkBackground && 'text-white'
)}
>
Manifold
<br />
Markets
</div>
) : (
<div
className={clsx(
'font-major-mono mt-2 text-2xl lowercase text-gray-900 md:whitespace-nowrap',
darkBackground && 'text-white'
)}
>
Manifold Markets
</div>
))}
</a>
</Link>
)
}