mirror of
https://github.com/hanzoai/gui.git
synced 2026-10-30 18:12:27 +00:00
zeekayandHanzo Dev
954d41e603
The platform is what they were, so the menus name it once and the column under it lists what the platform actually offers. Co-authored-by: Hanzo Dev <[email protected]>
85 lines
2.5 KiB
TypeScript
85 lines
2.5 KiB
TypeScript
import { Paragraph, SizableText, Text, XStack, YStack } from '@hanzo/gui'
|
|
|
|
import { CheckCircle } from '~/components/CheckCircle'
|
|
import { ContainerLarge } from '~/components/Containers'
|
|
|
|
const FeatureItem = ({ label, children }) => {
|
|
return (
|
|
<SizableText>
|
|
<SizableText fontFamily="$mono" size="$5" fontWeight="800">
|
|
{label}
|
|
</SizableText>
|
|
-
|
|
<SizableText size="$5" render="span" color="$color9">
|
|
{children}
|
|
</SizableText>
|
|
</SizableText>
|
|
)
|
|
}
|
|
|
|
const Features = ({ items, ...props }: any) => {
|
|
return (
|
|
<YStack gap="$4" {...props}>
|
|
{items.map((feature, i) => (
|
|
<YStack
|
|
key={i}
|
|
bg="$background"
|
|
position="relative"
|
|
rounded="$true"
|
|
p="$6"
|
|
elevation="$1"
|
|
$sm={{ p: '$4' }}
|
|
>
|
|
<XStack render="li">
|
|
<Text color="$green9">
|
|
<CheckCircle />
|
|
</Text>
|
|
<Paragraph color="$gray11">{feature}</Paragraph>
|
|
</XStack>
|
|
</YStack>
|
|
))}
|
|
</YStack>
|
|
)
|
|
}
|
|
|
|
export const HomeExampleProps = () => {
|
|
return (
|
|
<ContainerLarge position="relative">
|
|
<XStack px="$6" pt="$8" gap="$4" $sm={{ flexDirection: 'column', px: 0 }}>
|
|
<YStack width="50%" $sm={{ width: '100%' }}>
|
|
<Features
|
|
gap="$8"
|
|
items={[
|
|
<FeatureItem key="" label="Press & hover events">
|
|
onHoverIn, onHoverOut, onPressIn, and onPressOut.
|
|
</FeatureItem>,
|
|
<FeatureItem key="" label="Pseudo styles">
|
|
Style hover, press, and focus, in combination with media queries.
|
|
</FeatureItem>,
|
|
<FeatureItem key="" label="Media queries">
|
|
For every style/variant.
|
|
</FeatureItem>,
|
|
]}
|
|
/>
|
|
</YStack>
|
|
<YStack width="50%" $sm={{ width: '100%' }}>
|
|
<Features
|
|
gap="$8"
|
|
items={[
|
|
<FeatureItem key="" label="Themes">
|
|
Change theme on any component.
|
|
</FeatureItem>,
|
|
<FeatureItem key="" label="Animations">
|
|
Animate every component, enter and exit styling, works with pseudo states.
|
|
</FeatureItem>,
|
|
<FeatureItem key="" label="DOM escape hatches">
|
|
Support for className and other HTML attributes.
|
|
</FeatureItem>,
|
|
]}
|
|
/>
|
|
</YStack>
|
|
</XStack>
|
|
</ContainerLarge>
|
|
)
|
|
}
|