PliWould/components/AreaRugTag.tsx

import { area_t } from "@/lib/dimensions";
import { Product } from "@/lib/product";
import convert, { Area, Length } from "convert";
import dayjs, { Dayjs } from "dayjs";
import { StyleSheet, Text, View } from "react-native";

export type AreaRugTagProps = {
    dimensions: area_t,
    product: Product,
    date?: Dayjs
    currencySymbol?: string
};

export const AreaRugTag = (props: AreaRugTagProps) => {
    const date = props.date || dayjs();
    const square = props.dimensions.l * props.dimensions.w;
    const areaUnits = `sq ${props.dimensions.u}`;
    const square2 = convert(square, areaUnits as Area).to("sq " + props.product.dimensions.u as Area)
    const price = (square2 / props.product.pricePerUnit) * props.product.pricePerUnit;
    const sPrice = price.toLocaleString(undefined, {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
    })
    const currencySymbol = props.currencySymbol || "$";
    return (
        <View aria-label="area rug tag" style={styles.component}>
            <Text aria-label="area rug dimensions" style={styles.dimensions}>{Math.round(props.dimensions.l)} x {Math.round(props.dimensions.w)}</Text>
            <Text aria-label="area rug price" style={styles.price}>{currencySymbol} {sPrice}</Text>
            <Text aria-label="area rug date" style={styles.date}>{date.format("YYYY/MM/DD")}</Text>
            <Text aria-label="this week's color" style={styles.tagColor}>[Curent Tag Color]</Text>
        </View>
    )
};

const BIG_FONT_SIZE = 30;

const styles = StyleSheet.create({
    component: {
        paddingVertical: 100,
        alignItems: "center",
    },
    dimensions: {
        fontSize: BIG_FONT_SIZE,
    },
    price: {
        fontSize: BIG_FONT_SIZE,
    },
    date: {
        fontSize: BIG_FONT_SIZE,
    },
    tagColor: {
        fontSize: BIG_FONT_SIZE,
    },
})