110 lines
3.1 KiB
TypeScript
110 lines
3.1 KiB
TypeScript
|
/* eslint-disable react/jsx-key */
|
||
|
|
import { TextStyle, View, ViewStyle } from "react-native"
|
||
|
|
|
||
|
|
import { Icon, iconRegistry, type IconTypes } from "@/components/Icon"
|
||
|
|
import { Text } from "@/components/Text"
|
||
|
|
import { $styles } from "@/theme/styles"
|
||
|
|
import type { ThemedStyle } from "@/theme/types"
|
||
|
|
|
||
|
|
import { Demo } from "./types"
|
||
|
|
import { DemoUseCase } from "../DemoUseCase"
|
||
|
|
|
||
|
|
const $demoIconContainer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
|
||
|
|
padding: spacing.xs,
|
||
|
|
})
|
||
|
|
|
||
|
|
const $iconTile: ThemedStyle<ViewStyle> = ({ spacing }) => ({
|
||
|
|
width: "33.333%",
|
||
|
|
alignItems: "center",
|
||
|
|
paddingVertical: spacing.xs,
|
||
|
|
})
|
||
|
|
|
||
|
|
const $iconTileLabel: ThemedStyle<TextStyle> = ({ colors, spacing }) => ({
|
||
|
|
marginTop: spacing.xxs,
|
||
|
|
color: colors.textDim,
|
||
|
|
})
|
||
|
|
|
||
|
|
const $customIconContainer: ThemedStyle<ViewStyle> = ({ colors, spacing }) => ({
|
||
|
|
padding: spacing.md,
|
||
|
|
backgroundColor: colors.palette.angry500,
|
||
|
|
})
|
||
|
|
|
||
|
|
export const DemoIcon: Demo = {
|
||
|
|
name: "Icon",
|
||
|
|
description: "demoIcon:description",
|
||
|
|
data: ({ theme, themed }) => [
|
||
|
|
<DemoUseCase
|
||
|
|
name="demoIcon:useCase.icons.name"
|
||
|
|
description="demoIcon:useCase.icons.description"
|
||
|
|
layout="row"
|
||
|
|
itemStyle={$styles.flexWrap}
|
||
|
|
>
|
||
|
|
{Object.keys(iconRegistry).map((icon) => (
|
||
|
|
<View key={icon} style={themed($iconTile)}>
|
||
|
|
<Icon icon={icon as IconTypes} color={theme.colors.tint} size={35} />
|
||
|
|
|
||
|
|
<Text size="xs" style={themed($iconTileLabel)}>
|
||
|
|
{icon}
|
||
|
|
</Text>
|
||
|
|
</View>
|
||
|
|
))}
|
||
|
|
</DemoUseCase>,
|
||
|
|
|
||
|
|
<DemoUseCase
|
||
|
|
name="demoIcon:useCase.size.name"
|
||
|
|
description="demoIcon:useCase.size.description"
|
||
|
|
layout="row"
|
||
|
|
>
|
||
|
|
<Icon icon="ladybug" containerStyle={themed($demoIconContainer)} />
|
||
|
|
<Icon icon="ladybug" size={35} containerStyle={themed($demoIconContainer)} />
|
||
|
|
<Icon icon="ladybug" size={50} containerStyle={themed($demoIconContainer)} />
|
||
|
|
<Icon icon="ladybug" size={75} containerStyle={themed($demoIconContainer)} />
|
||
|
|
</DemoUseCase>,
|
||
|
|
|
||
|
|
<DemoUseCase
|
||
|
|
name="demoIcon:useCase.color.name"
|
||
|
|
description="demoIcon:useCase.color.description"
|
||
|
|
layout="row"
|
||
|
|
>
|
||
|
|
<Icon
|
||
|
|
icon="ladybug"
|
||
|
|
color={theme.colors.palette.accent500}
|
||
|
|
containerStyle={themed($demoIconContainer)}
|
||
|
|
/>
|
||
|
|
<Icon
|
||
|
|
icon="ladybug"
|
||
|
|
color={theme.colors.palette.primary500}
|
||
|
|
containerStyle={themed($demoIconContainer)}
|
||
|
|
/>
|
||
|
|
<Icon
|
||
|
|
icon="ladybug"
|
||
|
|
color={theme.colors.palette.secondary500}
|
||
|
|
containerStyle={themed($demoIconContainer)}
|
||
|
|
/>
|
||
|
|
<Icon
|
||
|
|
icon="ladybug"
|
||
|
|
color={theme.colors.palette.neutral700}
|
||
|
|
containerStyle={themed($demoIconContainer)}
|
||
|
|
/>
|
||
|
|
<Icon
|
||
|
|
icon="ladybug"
|
||
|
|
color={theme.colors.palette.angry500}
|
||
|
|
containerStyle={themed($demoIconContainer)}
|
||
|
|
/>
|
||
|
|
</DemoUseCase>,
|
||
|
|
|
||
|
|
<DemoUseCase
|
||
|
|
name="demoIcon:useCase.styling.name"
|
||
|
|
description="demoIcon:useCase.styling.description"
|
||
|
|
layout="row"
|
||
|
|
>
|
||
|
|
<Icon
|
||
|
|
icon="ladybug"
|
||
|
|
color={theme.colors.palette.neutral100}
|
||
|
|
size={40}
|
||
|
|
containerStyle={themed($customIconContainer)}
|
||
|
|
/>
|
||
|
|
</DemoUseCase>,
|
||
|
|
],
|
||
|
|
}
|