53 lines
1.8 KiB
TypeScript
53 lines
1.8 KiB
TypeScript
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: {
|
|
alignItems: "center",
|
|
},
|
|
dimensions: {
|
|
fontSize: BIG_FONT_SIZE,
|
|
},
|
|
price: {
|
|
fontSize: BIG_FONT_SIZE,
|
|
},
|
|
date: {
|
|
fontSize: BIG_FONT_SIZE,
|
|
},
|
|
tagColor: {
|
|
fontSize: BIG_FONT_SIZE,
|
|
},
|
|
}) |