Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 | 2x 24x 24x 24x 24x 24x | import { DimensionValue, Pressable, Text, View } from "react-native";
import { makeStyles } from "@repo/ui/themes/makeStyles";
import { Theme } from "@repo/ui/themes/types";
import { textStyles } from "@repo/ui/themes/typography";
type variant = "primary" | "secondary";
type RoomCardProps = {
room: string;
location: string;
width?: DimensionValue;
isCurrent?: boolean;
isSelected?: boolean;
variant?: variant;
onPress?: () => void;
};
export const RoomCard = ({
room,
location,
width = "100%",
isCurrent,
isSelected,
variant = "primary",
onPress,
}: RoomCardProps) => {
const styles = useStyles();
const disabled = isCurrent;
const accessibilityLabel = [
`${room} ${location}`,
isCurrent ? "current location" : null,
isSelected && !isCurrent ? "selected" : null,
]
.filter(Boolean)
.join(", ");
return (
<Pressable
testID={isCurrent ? "current-location" : `${room}-${location}`}
disabled={disabled}
onPress={onPress}
accessibilityRole="button"
accessibilityLabel={accessibilityLabel}
accessibilityState={{ selected: isSelected, disabled }}
style={[
styles.container,
{ width: width },
isCurrent && styles.containerCurrent,
isSelected &&
(variant === "secondary"
? styles.containerCurrent
: styles.containerSelected),
disabled && styles.disabled,
]}
>
<View style={styles.textContainer}>
<Text
style={[
styles.roomText,
isSelected && variant === "primary" && styles.textSelected,
]}
>
{room.toUpperCase()}
</Text>
<Text
style={[
styles.locationText,
isSelected && variant === "primary" && styles.textSelected,
]}
>
{location.toUpperCase()}
</Text>
</View>
</Pressable>
);
};
const useStyles = makeStyles((theme: Theme) => ({
container: {
height: 120,
borderRadius: theme.metrics.borderRadius[2.5],
backgroundColor: theme.colors.white,
padding: theme.metrics.spacing[2],
justifyContent: "space-between",
},
containerSelected: {
backgroundColor: theme.colors.slate97,
},
containerCurrent: {
backgroundColor: theme.colors.gray5,
},
disabled: {
opacity: 0.9,
},
textContainer: {
flex: 1,
gap: 2,
justifyContent: "flex-end",
},
roomText: {
...textStyles.content.light,
fontSize: theme.metrics.spacing[10],
lineHeight: theme.metrics.spacing[11],
color: theme.colors.slate97,
},
locationText: {
...textStyles.content.regular,
fontSize: theme.metrics.spacing[3.5],
lineHeight: 15,
color: theme.colors.slate97,
},
textSelected: {
color: theme.colors.white,
},
}));
|