Сквиркл

import * as React from "react";
import { SquircleView } from "@/shared/components/base/squircle-view";
import { StyleSheet, View } from "react-native";
import { Showcase, useCustomize } from "~/showcase";
import { SymbolView } from "expo-symbols";

const CUSTOMIZE = [
  { key: "background", label: "Цвет фона", type: "color", default: "#fe3737" },
  { key: "size", label: "Размер", type: "slider", min: 60, max: 320, step: 1, unit: "px", default: 150 },
  { key: "cornerRadius", label: "Радиус угла", type: "slider", min: 0, max: 160, step: 1, unit: "px", default: 59 },
  { key: "cornerSmoothing", label: "Сглаживание", type: "slider", min: 0, max: 1, step: 0.05, default: 0.6 },
  { key: "borderWidth", label: "Толщина рамки", type: "slider", min: 0, max: 12, step: 0.5, unit: "px", default: 0 },
  { key: "borderColor", label: "Цвет рамки", type: "color", default: "#ffffff" },
  { key: "iconColor", label: "Цвет иконки", type: "color", default: "#ddebe0" },
  { key: "iconSize", label: "Размер иконки", type: "slider", min: 20, max: 200, step: 1, unit: "px", default: 100 },
] as const;

export default function SquircleViewScreen() {
  const custom = useCustomize(CUSTOMIZE);

  return (
    <Showcase>
      <View style={styles.stage}>
        <SquircleView
          style={[styles.view, { width: custom.size, height: custom.size }]}
          backgroundColor={custom.background}
          cornerRadius={custom.cornerRadius}
          cornerSmoothing={custom.cornerSmoothing}
          borderWidth={custom.borderWidth}
          borderColor={custom.borderWidth > 0 ? custom.borderColor : undefined}
        >
          <View style={styles.container}>
            <SymbolView
              name="square.stack.3d.down.right.fill"
              tintColor={custom.iconColor}
              size={custom.iconSize}
            />
          </View>
        </SquircleView>
      </View>
    </Showcase>
  );
}

const styles = StyleSheet.create({
  stage: {
    flex: 1,
    backgroundColor: "#0a0a0a",
    justifyContent: "center",
    alignItems: "center",
  },
  view: {
    width: 150,
    height: 150,
    justifyContent: "center",
    alignItems: "center",
  },
  container: {
    justifyContent: "center",
    alignItems: "center",
    flex: 1,
  },
});