-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(ui): add a banner to the page in demo mode (#2058)
* feat(ui): add banner to the page in demo mode * fix * [autofix.ci] apply automated fixes * update --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Meng Zhang <[email protected]>
- Loading branch information
3 people
authored
May 6, 2024
1 parent
c63e3fe
commit 4b54d34
Showing
6 changed files
with
168 additions
and
27 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| 'use client' | ||
|
|
||
| import { ScrollArea } from '@/components/ui/scroll-area' | ||
| import { BANNER_HEIGHT, useShowDemoBanner } from '@/components/demo-banner' | ||
| import { Header } from '@/components/header' | ||
|
|
||
| export default function MainContent({ | ||
| children | ||
| }: { | ||
| children: React.ReactNode | ||
| }) { | ||
| const [isShowDemoBanner] = useShowDemoBanner() | ||
| const style = isShowDemoBanner | ||
| ? { height: `calc(100vh - ${BANNER_HEIGHT})` } | ||
| : { height: '100vh' } | ||
| return ( | ||
| <> | ||
| {/* Wraps right hand side into ScrollArea, making scroll bar consistent across all browsers */} | ||
| <ScrollArea className={'flex flex-1 flex-col'} style={style}> | ||
| <Header /> | ||
| <div className="flex-1 p-4 lg:p-10">{children}</div> | ||
| </ScrollArea> | ||
| </> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| 'use client' | ||
|
|
||
| import { useEffect, useState } from 'react' | ||
| import { isNil } from 'lodash-es' | ||
| import { useTheme } from 'next-themes' | ||
| import useSWRImmutable from 'swr/immutable' | ||
|
|
||
| import { useIsDemoMode } from '@/lib/hooks/use-server-info' | ||
| import { cn } from '@/lib/utils' | ||
| import { | ||
| IconClose, | ||
| IconGitFork, | ||
| IconGithub, | ||
| IconStar | ||
| } from '@/components/ui/icons' | ||
|
|
||
| export const BANNER_HEIGHT = '3.5rem' | ||
|
|
||
| export function useShowDemoBanner(): [boolean, (isShow: boolean) => void] { | ||
| const isDemoMode = useIsDemoMode() | ||
| const [isShow, setIsShow] = useState(false) | ||
|
|
||
| useEffect(() => { | ||
| if (!isNil(isDemoMode)) { | ||
| setIsShow(isDemoMode) | ||
| } | ||
| }, [isDemoMode]) | ||
|
|
||
| return [isShow, setIsShow] | ||
| } | ||
|
|
||
| export function DemoBanner() { | ||
| const [isShow, setIsShow] = useShowDemoBanner() | ||
| const [slackIconFill, setSlackIconFill] = useState('') | ||
| const { theme } = useTheme() | ||
| const { data } = useSWRImmutable( | ||
| 'https://api.github.com/repos/TabbyML/tabby', | ||
| (url: string) => fetch(url).then(res => res.json()) | ||
| ) | ||
|
|
||
| useEffect(() => { | ||
| setSlackIconFill(theme === 'dark' ? '#171615' : '#ECECEC') | ||
| }, [isShow, theme]) | ||
|
|
||
| const style = isShow ? { height: BANNER_HEIGHT } : { height: 0 } | ||
| return ( | ||
| <div | ||
| className={cn( | ||
| 'flex items-center justify-between bg-primary px-4 text-primary-foreground transition-all md:px-5', | ||
| { | ||
| 'opacity-100 pointer-events-auto': isShow, | ||
| 'opacity-0 pointer-events-none': !isShow | ||
| } | ||
| )} | ||
| style={style} | ||
| > | ||
| <a | ||
| href="https://links.tabbyml.com/schedule-a-demo" | ||
| target="_blank" | ||
| className="flex items-center gap-x-2 text-xs font-semibold underline md:text-sm" | ||
| > | ||
| <span>📆</span> | ||
| <span>Book a 30-minute product demo.</span> | ||
| </a> | ||
|
|
||
| <div className="flex items-center gap-x-4 md:gap-x-8"> | ||
| <a | ||
| href="https://github.com/TabbyML/tabby" | ||
| target="_blank" | ||
| className="flex items-center transition-all hover:opacity-70" | ||
| > | ||
| <IconGithub /> | ||
| <div className="ml-2 hidden md:block"> | ||
| <p className="text-xs font-semibold">TabbyML/tabby</p> | ||
| <div | ||
| className={cn('flex items-center text-xs transition-all', { | ||
| 'h-4 opacity-70': data, | ||
| 'h-0 opacity-0': !data | ||
| })} | ||
| > | ||
| <IconStar className="mr-1 h-2.5 w-2.5" /> | ||
| <span>{data?.stargazers_count}</span> | ||
| <IconGitFork className="ml-2 mr-1 h-2.5 w-2.5" /> | ||
| <span>{data?.forks_count}</span> | ||
| </div> | ||
| </div> | ||
| </a> | ||
|
|
||
| <IconClose | ||
| className="cursor-pointer transition-all hover:opacity-70" | ||
| onClick={() => setIsShow(false)} | ||
| /> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters