Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/nperez0111/bookhive. Track your books, share your shelves, see what others are reading bookhive.buzz
atproto bluesky books bookshelf goodreads management-system
Something went wrong. Try again.
1.8 kB · 64 lines
TSX
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465import React from "react";import { View, ViewProps, StyleSheet } from "react-native";import { LinearGradient } from "expo-linear-gradient";import { Colors } from "@/constants/Colors";import { useColorScheme } from "@/hooks/useColorScheme";
export type GradientViewProps = ViewProps & { variant?: "primary" | "secondary" | "warm" | "cool" | "custom"; colors?: string[]; start?: { x: number; y: number }; end?: { x: number; y: number }; children?: React.ReactNode;};
export function GradientView({ style, variant = "primary", colors, start = { x: 0, y: 0 }, end = { x: 1, y: 0.8 }, children, ...otherProps}: GradientViewProps) { const colorScheme = useColorScheme(); const themeColors = Colors[colorScheme ?? "light"];
const getGradientColors = () => { if (colors) return colors;
switch (variant) { case "primary": return themeColors.primaryGradient; case "secondary": return colorScheme === "dark" ? ["#2d3748", "#4a5568"] : ["#f7fafc", "#edf2f7"]; case "warm": return colorScheme === "dark" ? ["#744210", "#92400e"] : ["#fed7aa", "#fdba74"]; case "cool": return colorScheme === "dark" ? ["#1e3a8a", "#3730a3"] : ["#dbeafe", "#bfdbfe"]; default: return themeColors.primaryGradient; } };
// Remove backgroundColor from otherProps to avoid conflicts const { backgroundColor, ...restProps } = otherProps as any;
return ( <LinearGradient colors={getGradientColors()} start={start} end={end} style={[styles.container, StyleSheet.flatten([{ borderRadius: 24 }, style])]} {...restProps} > {children} </LinearGradient> );}
const styles = StyleSheet.create({ container: { flex: 1, },});