mirror of
https://github.com/hanzoai/gui.git
synced 2026-10-25 02:31:41 +00:00
zeekay
4afa47a701
Stripe, Supabase, Bento, Takeout, seats, licenses and coupons came with the fork of the site and sold nothing here. Identity is Hanzo IAM and there is no store, so the forty-four routes, the purchase flow and the theme-history persistence go, and what remains is a docs site.
78 lines
2.1 KiB
TypeScript
78 lines
2.1 KiB
TypeScript
import { useStore } from '@hanzogui/use-store'
|
|
import type { ThemeName } from '@hanzo/gui'
|
|
import {
|
|
Separator,
|
|
SizableText,
|
|
Spinner,
|
|
Theme,
|
|
XStack,
|
|
YStack,
|
|
useThemeName,
|
|
} from '@hanzo/gui'
|
|
|
|
import { useThemeBuilderStore } from '~/features/studio/theme/store/ThemeBuilderStore'
|
|
import { StudioThemesQuickPreviewSection } from '../views/StudioThemesQuickPreviewSection'
|
|
import { getStudioInternalThemeName } from '../../updatePreviewTheme'
|
|
|
|
export function StepSubThemesSidebar() {
|
|
const store = useThemeBuilderStore()
|
|
const hasAccent = store.subThemes[0]?.type === 'theme' && !!store.subThemes[0]?.accent
|
|
const currentThemeName = useThemeName()
|
|
const themeNameBase = getStudioInternalThemeName(store.baseTheme.id)
|
|
const subThemeName = store.subThemes[0]?.name
|
|
|
|
let topThemeName = themeNameBase
|
|
let bottomThemeName = subThemeName as ThemeName
|
|
|
|
// force re-render on every change
|
|
store.themeSuiteVersion
|
|
|
|
return (
|
|
<YStack flex={1} pl={20}>
|
|
<YStack p="$4" flex={1} gap="$4">
|
|
<XStack items="center" gap="$4">
|
|
<Separator />
|
|
<SizableText size="$4" select="none">
|
|
Parent theme: {currentThemeName}
|
|
</SizableText>
|
|
<Separator />
|
|
</XStack>
|
|
|
|
<Theme name={topThemeName}>
|
|
<StudioThemesQuickPreviewSection scheme="light" hasAccent={hasAccent} />
|
|
</Theme>
|
|
|
|
<XStack items="center" gap="$4">
|
|
<Separator />
|
|
<SizableText size="$4" select="none">
|
|
Sub theme: {subThemeName}
|
|
</SizableText>
|
|
<Separator />
|
|
</XStack>
|
|
|
|
<Theme name={topThemeName}>
|
|
<Theme name={bottomThemeName}>
|
|
<StudioThemesQuickPreviewSection scheme="dark" hasAccent={hasAccent} />
|
|
</Theme>
|
|
</Theme>
|
|
|
|
<YStack
|
|
pointerEvents="none"
|
|
flex={1}
|
|
position="absolute"
|
|
l={0}
|
|
r={0}
|
|
t={0}
|
|
b={0}
|
|
bg="rgba(0, 0, 0, 0.25)"
|
|
items="center"
|
|
justify="center"
|
|
z={100}
|
|
>
|
|
<Spinner />
|
|
</YStack>
|
|
</YStack>
|
|
</YStack>
|
|
)
|
|
}
|