template_0205

RN_TEMPLATE/app/screens/ShowroomScreen/demos/DemoIcon.tsx

@@ -0,0 +1,109 @@
+/* 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>,
+  ],
+}