leonm/musicland
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Philip Cesar Garay
2025-08-06 21:06:01 +08:00
parent d08ec7b778
commit 40e877774b
33 changed files with 1148 additions and 517 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/BorderGradient/BorderGradient.web.js
+54 -55
View File
@@ -5,20 +5,20 @@ const BorderGradient = ({ children, gradientProps, ...props }) => {
const defaultGradientProps = {
start: {
x: 0.5,
y: 0
y: 0,
},
end: {
x: 0.5,
y: 1
y: 1,
},
locations: [],
colors: [],
useAngle: false,
angle: 0
angle: 0,
};
const { locations, end, start, useAngle, angle, onLayout, colors } =
gradientProps;
gradientProps;
const {
style,
@@ -31,7 +31,7 @@ const BorderGradient = ({ children, gradientProps, ...props }) => {
borderTopWidth,
borderLeftWidth,
borderRightWidth,
borderBottomWidth
borderBottomWidth,
} = props;
const propStart = start ?? defaultGradientProps?.start;
@@ -39,13 +39,13 @@ const BorderGradient = ({ children, gradientProps, ...props }) => {
const [state, setState] = useState({
width: 1,
height: 1
height: 1,
});
const measure = (event) => {
setState({
width: event.nativeEvent.layout.width,
height: event.nativeEvent.layout.height
height: event.nativeEvent.layout.height,
});
if (onLayout) {
onLayout(event);
@@ -59,62 +59,62 @@ const BorderGradient = ({ children, gradientProps, ...props }) => {
// Math.atan2 handles Infinity
const _angle =
Math.atan2(
state.width * (propEnd.y - propStart.y),
state.height * (propEnd.x - propStart.x)
) +
Math.PI / 2;
Math.atan2(
state.width * (propEnd.y - propStart.y),
state.height * (propEnd.x - propStart.x)
) +
Math.PI / 2;
return _angle + "rad";
};
const getColors = () =>
colors.
map((color, index) => {
const location = locations?.[index] ?? defaultGradientProps.locations;
let locationStyle = "";
if (location) {
locationStyle = " " + location * 100 + "%";
}
return color + locationStyle;
}).
join(",");
colors
.map((color, index) => {
const location = locations?.[index] ?? defaultGradientProps.locations;
let locationStyle = "";
if (location) {
locationStyle = " " + location * 100 + "%";
}
return color + locationStyle;
})
.join(",");
return (
<View
style={{
position: "relative"
}}>
position: "relative",
}}
>
<View
onLayout={measure}
style={[
style,
{
borderWidth,
borderRadius,
borderTopLeftRadius,
borderTopRightRadius,
borderBottomLeftRadius,
borderBottomRightRadius,
borderTopWidth,
borderLeftWidth,
borderRightWidth,
borderBottomWidth,
borderStyle: "solid",
borderColor: "transparent",
// borderImage: `linear-gradient(${getAngle()},${getColors()}) 1`,
background: `linear-gradient(${getAngle()},${getColors()}) border-box`,
WebkitMask:
"linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0)",
WebkitMaskComposite: "xor",
maskComposite: "exclude",
overflow: "hidden"
}]
}>
</View>
style,
{
borderWidth,
borderRadius,
borderTopLeftRadius,
borderTopRightRadius,
borderBottomLeftRadius,
borderBottomRightRadius,
borderTopWidth,
borderLeftWidth,
borderRightWidth,
borderBottomWidth,
borderStyle: "solid",
borderColor: "transparent",
// borderImage: `linear-gradient(${getAngle()},${getColors()}) 1`,
background: `linear-gradient(${getAngle()},${getColors()}) border-box`,
WebkitMask:
"linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0)",
WebkitMaskComposite: "xor",
maskComposite: "exclude",
overflow: "hidden",
},
]}
></View>
<View style={styles.innerContainer}>{children}</View>
</View>);
</View>
);
};
export default BorderGradient;
@@ -122,7 +122,6 @@ export default BorderGradient;
const styles = StyleSheet.create({
innerContainer: {
flex: 1,
margin: 5, // <-- Border Width
position: "absolute",
top: 0,
bottom: 0,
@@ -130,6 +129,6 @@ const styles = StyleSheet.create({
justifyContent: "center",
right: 0,
left: 0,
overflow: "hidden"
}
});
overflow: "hidden",
},
});
src/components/BorderGradientButton.js
+9 -3
View File
@@ -5,17 +5,21 @@ import { Palette, Style } from "../styles";
import { BlurView } from "expo-blur";
import { FONT_FAMILY } from "../styles/Fonts";
const BorderGradientButton = ({ title = "J’ai déjà mes paroles" }) => {
const BorderGradientButton = ({ title = "J’ai déjà mes paroles", onPress }) => {
return (
<Pressable>
<Pressable onPress={onPress}>
<BorderGradient
gradientProps={{
colors: ["#F94697", "#7023F7"],
start: { x: 0, y: 0 },
end: { x: 1, y: 0 },
locations: [0, 1],
}}
style={{
height: 50,
borderRadius: 14,
borderWidth: 1,
zIndex: 1,
}}
>
<View
@@ -23,10 +27,12 @@ const BorderGradientButton = ({ title = "J’ai déjà mes paroles" }) => {
borderRadius: 14,
overflow: "hidden",
backgroundColor: "#73737324",
width: "100%",
height: "100%",
}}
>
<BlurView
intensity={30}
intensity={40}
tint="dark"
style={{
width: "100%",
src/components/ItemContainer/ItemContainer.js
+50
View File
@@ -0,0 +1,50 @@
import { View, Text, StyleSheet } from "react-native";
import React from "react";
import BorderGradient from "../BorderGradient/BorderGradient";
import { BlurView } from "expo-blur";
import { responsiveHeight } from "react-native-responsive-dimensions";
const ItemContainer = ({ height = responsiveHeight(40), children }) => {
return (
<BorderGradient
gradientProps={{
colors: ["#FFFFFF00", "#FFFFFF"],
start: { x: 0.3, y: 0 },
end: { x: 1, y: 1 },
}}
style={{
...styles.borderGradientStyle,
height,
}}
>
<View style={styles.blurContainer}>
<BlurView intensity={40} style={{ flex: 1, padding: 6 }}>
{children}
</BlurView>
</View>
</BorderGradient>
);
};
export default ItemContainer;
const styles = StyleSheet.create({
borderGradientStyle: {
borderWidth: 1,
borderRadius: 20,
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 100,
},
blurContainer: {
flex: 1,
borderRadius: 20,
overflow: "hidden",
zIndex: 1,
},
});
src/components/ItemContainer/ItemContainer.web.js
+75
View File
@@ -0,0 +1,75 @@
import { View, Text, StyleSheet } from "react-native";
import React, { useState } from "react";
import BorderGradient from "../BorderGradient/BorderGradient";
import { responsiveHeight } from "react-native-responsive-dimensions";
import { BlurView } from "expo-blur";
import { Style } from "../../styles";
const ItemContainer = ({ height = responsiveHeight(40), children }) => {
const [containerLayout, setContainerLayout] = useState(null);
return (
<View
style={{
...styles.blurContainer,
}}
>
<BorderGradient
gradientProps={{
colors: ["rgba(72, 51, 51, 0)", "#FFFFFF"],
start: { x: 0.3, y: 0 },
end: { x: 1, y: 1 },
locations: [0, 1],
}}
style={{
...styles.borderGradientStyle,
height: containerLayout?.height,
}}
/>
<View
style={{
height,
...Style.containerCenter,
borderRadius: 24,
overflow: "hidden",
zIndex: 1,
}}
onLayout={(e) => {
setContainerLayout(e.nativeEvent.layout);
}}
>
<BlurView
intensity={40}
style={{
padding: 6,
zIndex: 2,
width: "99.2%",
alignSelf: "center",
height: "99.2%",
}}
>
{children}
</BlurView>
</View>
</View>
);
};
export default ItemContainer;
const styles = StyleSheet.create({
borderGradientStyle: {
borderWidth: 1,
borderRadius: 20,
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 100,
position: "absolute",
width: "100%",
},
});
src/components/Slider.js
+1 -1
View File
@@ -5,7 +5,7 @@ import { Palette } from "../styles";
export default (props) => {
return (
<Slider
style={{ width: "100%" }}
style={{ width: "100%", height: 100 }}
minimumTrackTintColor={Palette.primary}
maximumTrackTintColor={Palette.lightPurple}
thumbTintColor={Palette.primary}