memowake-front/components/owner/resource.tsx

import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
import * as Progress from 'react-native-progress';
import { ThemedText } from "../ThemedText";
import { formatBytes } from "../utils/bytes";

interface Data {
    all: number;
    used: number;
}
interface ResourceProps {
    title: string;
    subtitle?: string;
    data: Data
    icon: any;
    style?: StyleProp<ViewStyle>;
    // 是否要转化单位
    isFormatBytes?: boolean;
}
const ResourceComponent = (props: ResourceProps) => {
    return (
        <View style={[styles.container, props.style]}>
            <View style={styles.header}>
                <View>
                    <ThemedText style={styles.title} className="!text-textSecondary">{props.title}</ThemedText>
                    <ThemedText style={styles.subtitle} className="!text-textPrimary">{props.subtitle || " "}</ThemedText>
                </View>
                <View>
                    {props.icon}
                </View>
            </View>
            <View style={styles.dataContainer}>
                <ThemedText style={styles.dataText}>{props.isFormatBytes ? formatBytes(props.data.used) : props.data.used}/{props.isFormatBytes ? formatBytes(props.data.all) : props.data.all}</ThemedText>
                <Progress.Bar
                    progress={props.data.used / props.data.all}
                    width={"100%"}
                    color="#AC7E35"
                    unfilledColor="#ddd"
                    borderWidth={0}
                    borderRadius={8}
                    height={2}
                />
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        width: "100%",
        backgroundColor: "#FAF9F6",
        padding: 16,
        borderRadius: 18,
    },
    header: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
    },
    title: {
        fontSize: 12,
        fontWeight: "700",
    },
    subtitle: {
        fontSize: 10,
        fontWeight: "400",
    },
    dataContainer: {
        flexDirection: "column",
    },
    dataText: {
        fontSize: 12,
        width: "100%",
        color: "#AC7E35",
        textAlign: "right",
    },
})

export default ResourceComponent;