permalink: app embed responsive sizing
-import { BaseAnchor, Box, Button, Center, Col, H3, Icon, Image, Row, Text } from '@tlon/indigo-react';
-import { Association, GraphNode, resourceFromPath, GraphConfig } from '@urbit/api';
+import { BaseAnchor, Box, BoxProps, Button, Center, Col, H3, Icon, Image, Row, Text } from '@tlon/indigo-react';
+import { Association, GraphNode, resourceFromPath, GraphConfig, Treaty } from '@urbit/api';
import React, { useCallback, useEffect, useState } from 'react';
import _ from 'lodash';
import { Link, useLocation } from 'react-router-dom';
@@ -196,35 +196,23 @@ const ClampedText = styled(Text)`
overflow: hidden;
`;
-function AppPermalink({ link, ship, desk }: Omit<IAppPermalink, 'type'>) {
- const treaty = useTreaty(ship, desk);
-
- useEffect(() => {
- if (!treaty) {
- useDocketState.getState().requestTreaty(ship, desk);
- }
- }, [treaty, ship, desk]);
+type AppTileProps = Treaty & BoxProps;
+function AppTile({ color, image, ...props }: AppTileProps) {
return (
- <Row
- display="inline-flex"
- width="500px"
- padding={3}
- bg="washedGray"
- borderRadius={3}
- >
<Box
position="relative"
flex="none"
- height="132px"
- width="132px"
+ height={['48px', '132px']}
+ width={['48px', '132px']}
marginRight={3}
borderRadius={3}
- bg={treaty?.color || 'gray'}
+ bg={color || 'gray'}
+ {...props}
>
- {treaty?.image && (
+ {image && (
<Image
- src={treaty.image}
+ src={image}
position="absolute"
top="0"
left="0"
@@ -233,9 +221,36 @@ function AppPermalink({ link, ship, desk }: Omit<IAppPermalink, 'type'>) {
/>
)}
</Box>
+ );
+}
+
+function AppPermalink({ link, ship, desk }: Omit<IAppPermalink, 'type'>) {
+ const treaty = useTreaty(ship, desk);
+
+ useEffect(() => {
+ if (!treaty) {
+ useDocketState.getState().requestTreaty(ship, desk);
+ }
+ }, [treaty, ship, desk]);
+
+ return (
+ <Row
+ display="inline-flex"
+ width="100%"
+ maxWidth="500px"
+ padding={3}
+ bg="washedGray"
+ borderRadius={3}
+ >
+ {treaty && <AppTile display={['none', 'block']} {...treaty} />}
+ <Col>
+ <Row flexDirection={['row', 'column']} alignItems={['center', 'start']} marginBottom={2}>
+ {treaty && <AppTile display={['block', 'none']} {...treaty} />}
<Col>
<H3 color="black">{treaty?.title}</H3>
- {treaty?.ship && <Author ship={treaty?.ship} showImage dontShowTime={true} marginBottom={2} />}
+ {treaty?.ship && <Author ship={treaty?.ship} showImage dontShowTime={true} />}
+ </Col>
+ </Row>
<ClampedText marginBottom={2} color="gray">{treaty?.info}</ClampedText>
<Button as="a" href={link} primary alignSelf="start" display="inline-flex" marginTop="auto">Open App</Button>
</Col>
