62 lines
1.7 KiB
React
62 lines
1.7 KiB
React
|
import {
|
||
|
|
View,
|
||
|
|
Text,
|
||
|
|
TouchableOpacity,
|
||
|
|
Image as NativeImage,
|
||
|
|
} from "react-native";
|
||
|
|
import React from "react";
|
||
|
|
import { useTailwind } from "tailwind-rn";
|
||
|
|
import { Image } from "expo-image";
|
||
|
|
import { useNavigation } from "@react-navigation/native";
|
||
|
|
|
||
|
|
const placeholder = "https://via.placeholder.com/1024x1024.png";
|
||
|
|
|
||
|
|
export default function SpaceCard({ data }) {
|
||
|
|
const navigation = useNavigation();
|
||
|
|
const tailwind = useTailwind();
|
||
|
|
const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk";
|
||
|
|
|
||
|
|
return (
|
||
|
|
<TouchableOpacity
|
||
|
|
activeOpacity={1}
|
||
|
|
onPress={() => navigation.navigate("StreamerSpace")}
|
||
|
|
style={tailwind("w-full px-1 mt-2")}
|
||
|
|
>
|
||
|
|
<View style={tailwind("flex flex-col rounded-lg overflow-hidden")}>
|
||
|
|
<Image
|
||
|
|
source={placeholder}
|
||
|
|
contentFit="cover"
|
||
|
|
transition={1000}
|
||
|
|
placeholder={blurhash}
|
||
|
|
cachePolicy="disk"
|
||
|
|
style={{ aspectRatio: "1/1", ...tailwind("w-full z-0") }}
|
||
|
|
/>
|
||
|
|
<NativeImage
|
||
|
|
style={{ right: 2, ...tailwind("absolute top-0") }}
|
||
|
|
source={require("../../assets/icon/others/space_new.png")}
|
||
|
|
/>
|
||
|
|
<View
|
||
|
|
style={{
|
||
|
|
height: 42,
|
||
|
|
...tailwind(
|
||
|
|
"flex flex-row w-full items-center px-2.5 bg-[#FFFFFF1A]"
|
||
|
|
),
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Text
|
||
|
|
style={tailwind("shrink text-white text-sm font-medium")}
|
||
|
|
numberOfLines={1}
|
||
|
|
ellipsizeMode="tail"
|
||
|
|
>
|
||
|
|
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
|
||
|
|
</Text>
|
||
|
|
<NativeImage
|
||
|
|
style={tailwind("ml-1")}
|
||
|
|
source={require("../../assets/icon/others/pay_space.png")}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</TouchableOpacity>
|
||
|
|
);
|
||
|
|
}
|