Dhairyashil Shinde
a2a77376b3
* fix: companion extension oauth * fix: ios build * address cubics comments
48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
import { Platform, ViewStyle } from "react-native";
|
|
|
|
interface ShadowConfig {
|
|
color?: string;
|
|
offsetY?: number;
|
|
offsetX?: number;
|
|
opacity?: number;
|
|
radius?: number;
|
|
elevation?: number;
|
|
}
|
|
|
|
export function createShadow(config: ShadowConfig = {}): ViewStyle {
|
|
const {
|
|
color = "#000",
|
|
offsetX = 0,
|
|
offsetY = 2,
|
|
opacity = 0.1,
|
|
radius = 8,
|
|
elevation = 4,
|
|
} = config;
|
|
|
|
if (Platform.OS === "web") {
|
|
const alpha = Math.round(opacity * 255)
|
|
.toString(16)
|
|
.padStart(2, "0");
|
|
return {
|
|
// @ts-ignore - web-only property
|
|
boxShadow: `${offsetX}px ${offsetY}px ${radius}px rgba(0, 0, 0, ${opacity})`,
|
|
};
|
|
}
|
|
|
|
return {
|
|
shadowColor: color,
|
|
shadowOffset: { width: offsetX, height: offsetY },
|
|
shadowOpacity: opacity,
|
|
shadowRadius: radius,
|
|
elevation,
|
|
};
|
|
}
|
|
|
|
export const shadows = {
|
|
sm: () => createShadow({ offsetY: 1, radius: 3, opacity: 0.1, elevation: 2 }),
|
|
md: () => createShadow({ offsetY: 4, radius: 6, opacity: 0.1, elevation: 4 }),
|
|
lg: () => createShadow({ offsetY: 10, radius: 15, opacity: 0.15, elevation: 8 }),
|
|
xl: () => createShadow({ offsetY: 20, radius: 25, opacity: 0.25, elevation: 24 }),
|
|
none: (): ViewStyle => ({}),
|
|
};
|