60 lines
2.7 KiB
TypeScript
60 lines
2.7 KiB
TypeScript
// Metro module 12162 (f12163).
|
|
import { Image as Image2, View } from "react-native";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { ResolvedValueType, resolveSingleStringOrSkeleton } from "../../../_bundle/Module12070";
|
|
import { ImageSkeleton, TextSkeleton } from "../../user_profile/native/UserProfileApplicationWidgetSkeletons";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
let useStyles;
|
|
const CollectionItem = function CollectionItem(props) {
|
|
const { componentConfig, resolveFieldValue } = props;
|
|
const styles = useStyles();
|
|
const r17 = resolveFieldValue(componentConfig == null ? void 0 : componentConfig.fields.image, [ResolvedValueType.MEDIA]);
|
|
const r16 = resolveSingleStringOrSkeleton(componentConfig, "name", resolveFieldValue);
|
|
const r13 = resolveSingleStringOrSkeleton(componentConfig, "description", resolveFieldValue);
|
|
return <View style={styles.item}>
|
|
{r17 != null ? <Image2 source={{
|
|
uri: r17.media.url
|
|
}} style={styles.itemImage} resizeMode="contain" /> : <ImageSkeleton style={styles.itemImage} />}
|
|
<View style={styles.itemContent}>
|
|
{r16.status === "value" ? <Text variant="text-xs/medium" lineClamp={2}>{r16.text}</Text> : <TextSkeleton variant="text-xs/medium" widthChars={6} />}
|
|
{r13.status === "value" ? <Text variant="text-xxs/medium" color="text-subtle" lineClamp={2}>{r13.text}</Text> : <TextSkeleton variant="text-xxs/medium" widthChars={10} />}
|
|
</View>
|
|
</View>;
|
|
};
|
|
useStyles = createStyles({
|
|
grid: {
|
|
flexDirection: "row",
|
|
flexWrap: "wrap",
|
|
rowGap: Module712.space.PX_16,
|
|
columnGap: Module712.space.PX_16
|
|
},
|
|
item: {
|
|
width: "47%",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: Module712.space.PX_12
|
|
},
|
|
itemImage: {
|
|
width: 48,
|
|
height: 48,
|
|
borderRadius: Module712.radii.sm,
|
|
overflow: "hidden",
|
|
backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE
|
|
},
|
|
itemContent: {
|
|
flex: 1,
|
|
gap: Module712.space.PX_4,
|
|
minWidth: 0
|
|
}
|
|
});
|
|
export default function UserProfileApplicationWidgetBottomCollectionLayout(props) {
|
|
const { bottomConfig, resolveFieldValue } = props;
|
|
return <View style={useStyles().grid}>
|
|
<CollectionItem componentConfig={bottomConfig.components.item_1} resolveFieldValue={resolveFieldValue} />
|
|
<CollectionItem componentConfig={bottomConfig.components.item_2} resolveFieldValue={resolveFieldValue} />
|
|
<CollectionItem componentConfig={bottomConfig.components.item_3} resolveFieldValue={resolveFieldValue} />
|
|
<CollectionItem componentConfig={bottomConfig.components.item_4} resolveFieldValue={resolveFieldValue} />
|
|
</View>;
|
|
};
|