Градиентный аватар

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useFonts } from "expo-font";
import { GradientAvatar } from "@/shared/components/base/gradient-avatar";
import { Showcase, useCustomize } from "~/showcase";

const CUSTOMIZE = [
  { key: "token1", label: "Имя 1", type: "text", default: "I", maxLength: 24 },
  { key: "token2", label: "Имя 2", type: "text", default: "Love", maxLength: 24 },
  { key: "token3", label: "Имя 3", type: "text", default: "Astra", maxLength: 24 },
  { key: "token4", label: "Имя 4", type: "text", default: "❤️", maxLength: 24 },
  { key: "size", label: "Размер", type: "slider", min: 32, max: 120, step: 1, unit: "px", default: 65 },
  { key: "rounding", label: "Скругление", type: "slider", min: 0, max: 99, step: 1, unit: "px", default: 99 },
  { key: "sheen", label: "Блик", type: "toggle", default: true },
  { key: "usePalette", label: "Своя палитра", type: "toggle", default: false },
  { key: "color1", label: "Цвет 1", type: "color", default: "#ff6b6b" },
  { key: "color2", label: "Цвет 2", type: "color", default: "#4d96ff" },
  { key: "color3", label: "Цвет 3", type: "color", default: "#ffd93d" },
] as const;

export default function GradientAvatarScreen() {
  const insets = useSafeAreaInsets();
  const [fontLoaded] = useFonts({
    SfProRoundedBold: require("~/assets/fonts/SF-Pro-Rounded-Bold.otf"),
    SfProRoundedMedium: require("~/assets/fonts/SF-Pro-Rounded-Medium.otf"),
  });

  const bold = fontLoaded ? "SfProRoundedBold" : undefined;
  const medium = fontLoaded ? "SfProRoundedMedium" : undefined;
  const custom = useCustomize(CUSTOMIZE);
  const { usePalette, color1, color2, color3 } = custom;
  const palette = React.useMemo(
    () => (usePalette ? [color1, color2, color3] : undefined),
    [usePalette, color1, color2, color3],
  );
  const tokens = [custom.token1, custom.token2, custom.token3, custom.token4];

  return (
    <Showcase>
      <View
        style={[
          styles.content,
          {
            justifyContent: "center",
            alignItems: "center",
          },
        ]}
      >
        <View style={styles.gradientRow}>
          {tokens.map((token, index) => (
            <GradientAvatar
              key={index}
              token={token}
              size={custom.size}
              rounding={custom.rounding}
              sheen={custom.sheen}
              palette={palette}
            />
          ))}
        </View>
      </View>
    </Showcase>
  );
}

const styles = StyleSheet.create({
  content: {
    flex: 1,
  },
  title: {
    fontSize: 30,
    color: "#fff",
    marginBottom: 4,
  },
  gradientRow: {
    flexDirection: "row",
    alignItems: "center",
    gap: 12,
  },
});