Skip to content

Commit cbfd492

Browse files
ObaidNadeemmsaaddev
ObaidNadeem
and
msaaddev
authored
📦 NEW: BaseAI Header (#42)
* 📦 NEW: docs-page-header-socials * header-responsive * 🐛 FIX: Header Responsiveness * Header weird double rendering issue fix * 🐛 FIX: Header final fixes * header-responsive * header buttons * Social icons arragnement and Github button content * 🐛 FIX: Social icons arragnement and Github button content * 🐛 FIX: Spacing Fix * Capital H in Github * 🐛 FIX: Capital H in GitHub * 👌 IMPROVE: Review SI * 👌 IMPROVE: Review SI * 🐛 FIX: Filename * 👌 IMPROVE: Header * 👌 IMPROVE: Header --------- Co-authored-by: msaaddev <[email protected]>
1 parent 3f27018 commit cbfd492

File tree

11 files changed

+205
-113
lines changed

11 files changed

+205
-113
lines changed

‎apps/baseai.dev/public/arrow.svg

Lines changed: 1 addition & 1 deletion
Loading

‎apps/baseai.dev/public/baseai.svg

Lines changed: 1 addition & 1 deletion
Loading

‎apps/baseai.dev/src/components/Footer.tsx

Lines changed: 35 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ import { usePathname } from 'next/navigation';
66
import { Button } from '@/components/Button';
77
import navigationData, { navLearn } from '@/data/navigation';
88

9+
import { GitHubIcon } from './icons/GitHubIcon';
10+
import { TwitterIcon } from './icons/TwitterIcon';
11+
import { DiscordIcon } from './icons/DiscordIcon';
12+
913
function PageLink({
1014
label,
1115
page,
@@ -43,7 +47,7 @@ function PageNavigation() {
4347
const isLearnPath = pathname.startsWith('/learn');
4448
const navLinks = isLearnPath ? navLearn : navigationData;
4549

46-
let allPages = navLinks.flatMap(group => group.links);
50+
let allPages = navLinks.flatMap(group => group.links);
4751
let currentPageIndex = allPages.findIndex(page => page.href === pathname);
4852

4953
if (currentPageIndex === -1) {
@@ -73,68 +77,46 @@ function PageNavigation() {
7377
);
7478
}
7579

76-
function XIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
77-
return (
78-
<svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
79-
<path d="M11.1527 8.92804L16.2525 3H15.044L10.6159 8.14724L7.07919 3H3L8.34821 10.7835L3 17H4.20855L8.88474 11.5643L12.6198 17H16.699L11.1524 8.92804H11.1527ZM9.49748 10.8521L8.95559 10.077L4.644 3.90978H6.50026L9.97976 8.88696L10.5216 9.66202L15.0446 16.1316H13.1883L9.49748 10.8524V10.8521Z" />
80-
</svg>
81-
);
82-
}
83-
84-
function GitHubIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
85-
return (
86-
<svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
87-
<path
88-
fillRule="evenodd"
89-
clipRule="evenodd"
90-
d="M10 1.667c-4.605 0-8.334 3.823-8.334 8.544 0 3.78 2.385 6.974 5.698 8.106.417.075.573-.182.573-.406 0-.203-.011-.875-.011-1.592-2.093.397-2.635-.522-2.802-1.002-.094-.246-.5-1.005-.854-1.207-.291-.16-.708-.556-.01-.567.656-.01 1.124.62 1.281.876.75 1.292 1.948.93 2.427.705.073-.555.291-.93.531-1.143-1.854-.213-3.791-.95-3.791-4.218 0-.929.322-1.698.854-2.296-.083-.214-.375-1.09.083-2.265 0 0 .698-.224 2.292.876a7.576 7.576 0 0 1 2.083-.288c.709 0 1.417.096 2.084.288 1.593-1.11 2.291-.875 2.291-.875.459 1.174.167 2.05.084 2.263.53.599.854 1.357.854 2.297 0 3.278-1.948 4.005-3.802 4.219.302.266.563.78.563 1.58 0 1.143-.011 2.061-.011 2.35 0 .224.156.491.573.405a8.365 8.365 0 0 0 4.11-3.116 8.707 8.707 0 0 0 1.567-4.99c0-4.721-3.73-8.545-8.334-8.545Z"
91-
/>
92-
</svg>
93-
);
94-
}
95-
96-
function DiscordIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
97-
return (
98-
<svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
99-
<path d="M16.238 4.515a14.842 14.842 0 0 0-3.664-1.136.055.055 0 0 0-.059.027 10.35 10.35 0 0 0-.456.938 13.702 13.702 0 0 0-4.115 0 9.479 9.479 0 0 0-.464-.938.058.058 0 0 0-.058-.027c-1.266.218-2.497.6-3.664 1.136a.052.052 0 0 0-.024.02C1.4 8.023.76 11.424 1.074 14.782a.062.062 0 0 0 .024.042 14.923 14.923 0 0 0 4.494 2.272.058.058 0 0 0 .064-.02c.346-.473.654-.972.92-1.496a.057.057 0 0 0-.032-.08 9.83 9.83 0 0 1-1.404-.669.058.058 0 0 1-.029-.046.058.058 0 0 1 .023-.05c.094-.07.189-.144.279-.218a.056.056 0 0 1 .058-.008c2.946 1.345 6.135 1.345 9.046 0a.056.056 0 0 1 .059.007c.09.074.184.149.28.22a.058.058 0 0 1 .023.049.059.059 0 0 1-.028.046 9.224 9.224 0 0 1-1.405.669.058.058 0 0 0-.033.033.056.056 0 0 0 .002.047c.27.523.58 1.022.92 1.495a.056.056 0 0 0 .062.021 14.878 14.878 0 0 0 4.502-2.272.055.055 0 0 0 .016-.018.056.056 0 0 0 .008-.023c.375-3.883-.63-7.256-2.662-10.246a.046.046 0 0 0-.023-.021Zm-9.223 8.221c-.887 0-1.618-.814-1.618-1.814s.717-1.814 1.618-1.814c.908 0 1.632.821 1.618 1.814 0 1-.717 1.814-1.618 1.814Zm5.981 0c-.887 0-1.618-.814-1.618-1.814s.717-1.814 1.618-1.814c.908 0 1.632.821 1.618 1.814 0 1-.71 1.814-1.618 1.814Z" />
100-
</svg>
101-
);
102-
}
103-
104-
function SocialLink({
105-
href,
106-
icon: Icon,
107-
children
108-
}: {
109-
href: string;
110-
icon: React.ComponentType<{ className?: string }>;
111-
children: React.ReactNode;
112-
}) {
80+
function Socials() {
11381
return (
114-
<Link href={href} className="group">
115-
<span className="sr-only">{children}</span>
116-
<Icon className="h-5 w-5 fill-zinc-700 transition group-hover:fill-zinc-900 dark:group-hover:fill-zinc-500" />
117-
</Link>
82+
<>
83+
<Link
84+
className="hidden md:block"
85+
href={'https://x.com/langbaseinc'}
86+
target="_blank"
87+
rel="noopener noreferrer"
88+
>
89+
<TwitterIcon className="size-4 text-black/35 dark:text-white/35" />
90+
</Link>
91+
<Link
92+
className="hidden md:block"
93+
href={'https://langbase.com/discord'}
94+
target="_blank"
95+
rel="noopener noreferrer"
96+
>
97+
<DiscordIcon className="size-4 text-black/35 dark:text-white/35" />
98+
</Link>
99+
<Link
100+
className="hidden md:block"
101+
href={'https://github.com/LangbaseInc/'}
102+
target="_blank"
103+
rel="noopener noreferrer"
104+
>
105+
<GitHubIcon className="size-4 text-black/35 dark:text-white/35" />
106+
</Link>
107+
</>
118108
);
119109
}
120110

121111
function SmallPrint() {
122112
return (
123-
<div className="flex flex-col items-center justify-between gap-5 xborder-t xborder-zinc-900/5 pt-8 sm:flex-row dark:border-white/5">
113+
<div className="xborder-t xborder-zinc-900/5 flex flex-col items-center justify-between gap-5 pt-8 sm:flex-row dark:border-white/5">
124114
<p className="text-xs text-zinc-600 dark:text-zinc-400">
125115
&copy; Copyright {new Date().getFullYear()}. All rights
126116
reserved.
127117
</p>
128118
<div className="flex gap-4">
129-
<SocialLink href="https://x.com/LangbaseInc" icon={XIcon}>
130-
Follow us on X
131-
</SocialLink>
132-
<SocialLink
133-
href="https://github.com/langbaseinc/baseai"
134-
icon={GitHubIcon}
135-
>
136-
Follow us on GitHub
137-
</SocialLink>
119+
<Socials />
138120
{/* <SocialLink href="#" icon={DiscordIcon}>
139121
Join our Discord server
140122
</SocialLink> */}
@@ -145,7 +127,7 @@ function SmallPrint() {
145127

146128
export function Footer() {
147129
return (
148-
<footer className="mx-auto w-full max-w-2xl space-y-10 px-4 pb-16 md:px-0 lg:max-w-5xl">
130+
<footer className="mx-auto w-full max-w-2xl space-y-10 px-4 pb-16 md:px-6 lg:max-w-5xl">
149131
<PageNavigation />
150132
<SmallPrint />
151133
</footer>

‎apps/baseai.dev/src/components/Header.tsx

Lines changed: 69 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@ import { ThemeToggle } from '@/components/ThemeToggle';
1515
import BaseAILogo from './baseai-logo';
1616
import { Anchor } from './ui/anchor';
1717
import { IconDocs } from './ui/iconists/icon-docs';
18+
import { GitHubIcon } from './icons/GitHubIcon';
19+
import { TwitterIcon } from './icons/TwitterIcon';
20+
import { DiscordIcon } from './icons/DiscordIcon';
1821

1922
/**
2023
* Retrieves the section title based on the provided pathname.
@@ -67,21 +70,53 @@ function HeaderLinks() {
6770

6871
return (
6972
<>
70-
<Anchor
71-
href={'https://github.com/LangbaseInc/baseai'}
72-
target="_blank"
73-
className="hidden w-auto font-semibold lg:flex "
74-
variant={'ghost'}
75-
>
76-
★ BaseAI
77-
</Anchor>
7873
<Anchor
7974
href={href}
8075
className="w-28 font-semibold"
8176
variant={'default'}
8277
>
8378
{text}
8479
</Anchor>
80+
<Anchor
81+
href={'https://github.com/LangbaseInc/baseai'}
82+
target="_blank"
83+
className="hidden xl:flex group border-primary/30"
84+
variant={'outline'}
85+
>
86+
<GitHubIcon className="size-4 text-black dark:text-white group-hover:text-white group-hover:dark:text-black" />
87+
<span className="leading-none flex-grow truncate">Star us on GitHub</span>
88+
</Anchor>
89+
</>
90+
);
91+
}
92+
93+
function Socials() {
94+
return (
95+
<>
96+
<Link
97+
className="hidden md:block"
98+
href={'https://x.com/langbaseinc'}
99+
target="_blank"
100+
rel="noopener noreferrer"
101+
>
102+
<TwitterIcon className="size-4 text-black/75 dark:text-white/75" />
103+
</Link>
104+
<Link
105+
className="hidden md:block"
106+
href={'https://langbase.com/discord'}
107+
target="_blank"
108+
rel="noopener noreferrer"
109+
>
110+
<DiscordIcon className="size-4 text-black/75 dark:text-white/75" />
111+
</Link>
112+
<Link
113+
className="hidden md:block"
114+
href={'https://github.com/LangbaseInc/'}
115+
target="_blank"
116+
rel="noopener noreferrer"
117+
>
118+
<GitHubIcon className="size-4 text-black/75 dark:text-white/75" />
119+
</Link>
85120
</>
86121
);
87122
}
@@ -105,9 +140,9 @@ export const Header = forwardRef<
105140
ref={ref}
106141
className={clsx(
107142
className,
108-
'fixed inset-0 inset-x-0 top-0 z-50 flex h-14 px-4 md:static md:mx-5 md:my-6 md:flex md:h-auto md:items-center md:justify-between md:gap-12 md:px-0 md:transition lg:left-72 lg:z-30 xl:left-80',
143+
'fixed inset-0 inset-x-0 top-0 z-50 flex h-14 px-4 md:static md:mx-5 md:my-6 md:flex md:h-auto md:items-center md:justify-between md:gap-0 md:px-0 md:transition lg:left-72 lg:z-30 xl:left-80',
109144
!isInsideMobileNavigation &&
110-
'backdrop-blur-sm lg:left-72 xl:left-80 dark:backdrop-blur',
145+
'backdrop-blur-sm lg:left-72 xl:left-80 dark:backdrop-blur',
111146
isInsideMobileNavigation ? 'xbg-background' : 'xbg-background'
112147
)}
113148
style={
@@ -117,36 +152,44 @@ export const Header = forwardRef<
117152
} as React.CSSProperties
118153
}
119154
>
120-
<div className="xbg-zinc-900/7.5 xdark:bg-white/7.5 absolute inset-x-0 top-full h-px transition md:hidden" />
155+
<div className="xbg-zinc-900/7.5 absolute inset-x-0 top-full h-px transition md:hidden dark:bg-white/7.5" />
121156

122-
<div className="hidden md:block">
123-
<h2 className="flex items-center text-2xl font-bold leading-7 text-foreground sm:truncate sm:text-3xl sm:tracking-tight">
157+
<div className="flex items-center md:w-[30%]">
158+
<h2 className="flex items-center text-2xl font-bold leading-7 text-foreground sm:truncate sm:text-2xl sm:tracking-tight">
124159
<IconDocs
125-
className="mr-4 h-7 w-7 text-muted-foreground/50"
160+
className="mr-4 hidden h-7 w-7 text-muted-foreground/50 lg:block"
126161
aria-hidden="true"
127162
/>
128-
{currentTitle}
129-
</h2>
130-
</div>
131-
<div className="flex w-full justify-between md:w-1/2 md:justify-end md:space-x-6">
132-
<Search />
133-
<div className="flex items-center gap-5 lg:hidden">
134-
<MobileNavigation />
163+
<div className="mr-3 md:mr-4 lg:hidden">
164+
<MobileNavigation />
165+
</div>
166+
<div className="hidden md:block">{currentTitle}</div>
135167
<Link
136168
href="/"
137169
aria-label="Home"
138-
className="font-bold text-black dark:text-white"
170+
className="block w-full font-bold text-black md:hidden dark:text-white"
139171
>
140-
<BaseAILogo width="30%" />
172+
<BaseAILogo className="w-[10rem] " />
141173
</Link>
174+
</h2>
175+
</div>
176+
<div className="flex w-full justify-end md:w-[60%] lg:w-[70%] md:space-x-5 lg:space-x-2">
177+
<Search />
178+
<div className="flex hidden items-center justify-center md:flex xl:hidden">
179+
<MobileSearch />
142180
</div>
143-
<div className="flex items-center justify-end gap-5">
181+
<div className="flex items-center justify-end gap-5 lg:gap-3 xl:gap-5">
144182
<div className="hidden md:block md:h-5 md:w-px md:bg-zinc-900/10 md:dark:bg-white/15" />
145183
<div className="flex items-center gap-4">
146-
<MobileSearch />
184+
<div className="md:hidden">
185+
<MobileSearch />
186+
</div>
147187
<HeaderLinks />
148-
<ThemeToggle />
149188
</div>
189+
<div className="hidden md:block md:h-5 md:w-px md:bg-zinc-900/10 md:dark:bg-white/15"></div>
190+
<ThemeToggle />
191+
<div className="hidden md:block md:h-5 md:w-px md:bg-zinc-900/10 md:dark:bg-white/15"></div>
192+
<Socials />
150193
</div>
151194
</div>
152195
</motion.div>

‎apps/baseai.dev/src/components/Layout.tsx

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,8 @@ export function Layout({
2727
className="contents lg:pointer-events-none lg:fixed lg:inset-0 lg:z-40 lg:flex"
2828
>
2929
<div className="contents bg-background lg:pointer-events-auto lg:block lg:w-72 lg:overflow-y-auto lg:border-zinc-900/10 lg:px-6 lg:pb-8 lg:pt-6 xl:w-80 lg:dark:border-white/10">
30-
<div className="hidden lg:flex mt-4">
31-
<Link
32-
href="/docs"
33-
aria-label="Home"
34-
>
30+
<div className="mt-4 hidden lg:flex">
31+
<Link href="/docs" aria-label="Home">
3532
<BaseAILogo width="30%" />
3633
</Link>
3734
</div>
@@ -41,7 +38,7 @@ export function Layout({
4138
<div className="z-1 relative flex flex-col rounded-bl-[calc(var(--radius)+2px)] rounded-tl-[calc(var(--radius)+2px)] bg-background md:mt-5 md:border md:border-r-0 md:border-border md:p-1 md:pr-0">
4239
<Header />
4340
<div className="prose rounded-bl-lg rounded-tl-lg bg-muted">
44-
<main className="flex-auto px-4 md:m-0 md:p-0">
41+
<main className="flex-auto px-4 md:m-0 md:px-6">
4542
{children}
4643
</main>
4744
<Footer />

0 commit comments

Comments
 (0)