3adae06d9c
followup to https://github.com/tldraw/tldraw/pull/3881 to enforce this in the codebase Describe what your pull request does. If appropriate, add GIFs or images showing the before and after. ### Change Type <!-- ❗ Please select a 'Scope' label ❗️ --> - [x] `sdk` — Changes the tldraw SDK - [x] `dotcom` — Changes the tldraw.com web app - [ ] `docs` — Changes to the documentation, examples, or templates. - [ ] `vs code` — Changes to the vscode plugin - [ ] `internal` — Does not affect user-facing stuff <!-- ❗ Please select a 'Type' label ❗️ --> - [ ] `bugfix` — Bug fix - [ ] `feature` — New feature - [x] `improvement` — Improving existing features - [ ] `chore` — Updating dependencies, other boring stuff - [ ] `galaxy brain` — Architectural changes - [ ] `tests` — Changes to any test code - [ ] `tools` — Changes to infrastructure, CI, internal scripts, debugging tools, etc. - [ ] `dunno` — I don't know
86 lines
2 KiB
TypeScript
86 lines
2 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { Icon } from './Icon'
|
|
import { Search } from './Search'
|
|
import { ThemeSwitcher } from './ThemeSwitcher'
|
|
|
|
export function Header({ sectionId }: { sectionId?: string }) {
|
|
return (
|
|
<div className="layout__header">
|
|
<div className="layout__header__left">
|
|
<Link href="/quick-start">
|
|
<img className="logo-dark" src="/tldraw_dev_dark.png" />
|
|
<img className="logo-light" src="/tldraw_dev_light.png" />
|
|
</Link>
|
|
</div>
|
|
<Search />
|
|
<div className="layout__header__links">
|
|
<div className="layout__header__sections">
|
|
<SectionLinks sectionId={sectionId} />
|
|
</div>
|
|
<div className="layout__header__socials">
|
|
<a
|
|
href="https://x.com/tldraw/"
|
|
className="sidebar__button icon-button"
|
|
title="twitter"
|
|
rel="noopener noreferrer"
|
|
target="_blank"
|
|
>
|
|
<Icon icon="twitter" />
|
|
</a>
|
|
<a
|
|
href="https://discord.com/invite/SBBEVCA4PG"
|
|
className="sidebar__button icon-button"
|
|
title="discord"
|
|
rel="noopener noreferrer"
|
|
target="_blank"
|
|
>
|
|
<Icon icon="discord" />
|
|
</a>
|
|
<a
|
|
href="https://github.com/tldraw/tldraw"
|
|
className="sidebar__button icon-button"
|
|
title="github"
|
|
rel="noopener noreferrer"
|
|
target="_blank"
|
|
>
|
|
<Icon icon="github" />
|
|
</a>
|
|
<ThemeSwitcher />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function SectionLinks({ sectionId }: { sectionId?: string | null }) {
|
|
return (
|
|
<>
|
|
<a
|
|
href="/quick-start"
|
|
title="Learn"
|
|
data-active={!['reference', 'examples'].includes(sectionId || '')}
|
|
className="layout_header__section"
|
|
>
|
|
Learn
|
|
</a>
|
|
<a
|
|
href="/reference/editor/Editor"
|
|
title="Reference"
|
|
data-active={sectionId === 'reference'}
|
|
className="layout_header__section"
|
|
>
|
|
Reference
|
|
</a>
|
|
<a
|
|
href="/examples/basic/basic"
|
|
title="Examples"
|
|
data-active={sectionId === 'examples'}
|
|
className="layout_header__section"
|
|
>
|
|
Examples
|
|
</a>
|
|
</>
|
|
)
|
|
}
|