60 lines
1.4 KiB
TypeScript
60 lines
1.4 KiB
TypeScript
import React from "react";
|
|
import { View, ViewProps, Platform } from "react-native";
|
|
import { cn } from "@/lib/utils";
|
|
import { useColorScheme } from "nativewind";
|
|
|
|
interface ShadowWrapperProps extends ViewProps {
|
|
level?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export function ShadowWrapper({
|
|
level = "md",
|
|
className,
|
|
children,
|
|
...props
|
|
}: ShadowWrapperProps) {
|
|
const { colorScheme } = useColorScheme();
|
|
const isDark = colorScheme === "dark";
|
|
|
|
const shadowClasses = {
|
|
none: "",
|
|
xs: isDark ? "" : "shadow-sm shadow-slate-200/30",
|
|
sm: isDark ? "" : "shadow-sm shadow-slate-200/50",
|
|
md: isDark ? "" : "shadow-md shadow-slate-200/60",
|
|
lg: isDark ? "" : "shadow-xl shadow-slate-200/70",
|
|
xl: isDark ? "" : "shadow-2xl shadow-slate-300/40",
|
|
};
|
|
|
|
const elevations = {
|
|
none: 0,
|
|
xs: 1,
|
|
sm: 2,
|
|
md: 4,
|
|
lg: 8,
|
|
xl: 12,
|
|
};
|
|
|
|
// Android elevation needs a background color to cast a shadow
|
|
const hasBgClass = className?.includes("bg-");
|
|
const androidBaseStyle =
|
|
Platform.OS === "android"
|
|
? {
|
|
elevation: isDark ? 0 : elevations[level],
|
|
backgroundColor: hasBgClass || isDark ? undefined : "white",
|
|
shadowColor: "#000",
|
|
}
|
|
: {};
|
|
|
|
return (
|
|
<View
|
|
className={cn(shadowClasses[level], className)}
|
|
style={[androidBaseStyle, props.style as any]}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</View>
|
|
);
|
|
}
|