diff --git a/src/components/Grid.tsx b/src/components/Grid.tsx new file mode 100644 index 0000000000..d71a46c0b7 --- /dev/null +++ b/src/components/Grid.tsx @@ -0,0 +1,59 @@ +import {createContext, useContext,useMemo} from 'react' +import {View} from 'react-native' + +import {atoms as a, ViewStyleProp} from '#/alf' + +const Context = createContext({ + gap: 0, +}) + +export function Row({ + children, + gap = 0, + style, +}: ViewStyleProp & { + children: React.ReactNode + gap?: number +}) { + return ( + ({gap}), [gap])}> + + {children} + + + ) +} + +export function Col({ + children, + width = 1, + style, +}: ViewStyleProp & { + children: React.ReactNode + width?: number +}) { + const {gap} = useContext(Context) + return ( + + {children} + + ) +} diff --git a/src/components/feeds/PostFeedVideoGridRow.tsx b/src/components/feeds/PostFeedVideoGridRow.tsx index 88a03ddaa3..688fb961a1 100644 --- a/src/components/feeds/PostFeedVideoGridRow.tsx +++ b/src/components/feeds/PostFeedVideoGridRow.tsx @@ -4,6 +4,7 @@ import {AppBskyEmbedVideo} from '@atproto/api' import {FeedPostSliceItem} from '#/state/queries/post-feed' import {VideoFeedSourceContext} from '#/screens/VideoFeed/types' import {atoms as a, useGutters} from '#/alf' +import * as Grid from '#/components/Grid' import { VideoPostCard, VideoPostCardPlaceholder, @@ -33,15 +34,17 @@ export function PostFeedVideoGridRow({ return ( - {posts.map(post => ( - - - - ))} + + {posts.map(post => ( + + + + ))} + )