Grid spacing improvements

environments/review-group-grid-r6doq8/deployments/3227
Chewbacca 2023-04-21 10:11:34 -04:00
rodzic 63ca6554d1
commit e5f7fe244c
4 zmienionych plików z 16 dodań i 24 usunięć

Wyświetl plik

@ -46,10 +46,8 @@ export default (props: Props) => {
</div> </div>
), []); ), []);
const renderGroupGrid = useCallback((group: Group, index: number) => ( const renderGroupGrid = useCallback((group: Group) => (
<div className='pb-4'> <GroupGridItem group={group} />
<GroupGridItem group={group} />
</div>
), []); ), []);
return ( return (
@ -79,10 +77,10 @@ export default (props: Props) => {
<VirtuosoGrid <VirtuosoGrid
useWindowScroll useWindowScroll
data={groups} data={groups}
itemContent={(index, group) => renderGroupGrid(group, index)} itemContent={(_index, group) => renderGroupGrid(group)}
components={{ components={{
Item: (props) => ( Item: (props) => (
<div {...props} className='w-1/2 flex-none' /> <div {...props} className='w-1/2 flex-none pb-4 [&:nth-last-of-type(-n+2)]:pb-0' />
), ),
List: GridList, List: GridList,
}} }}

Wyświetl plik

@ -46,10 +46,8 @@ const Popular: React.FC = () => {
</div> </div>
), []); ), []);
const renderGroupGrid = useCallback((group: Group, index: number) => ( const renderGroupGrid = useCallback((group: Group) => (
<div className='pb-4'> <GroupGridItem group={group} />
<GroupGridItem group={group} />
</div>
), []); ), []);
return ( return (
@ -73,10 +71,10 @@ const Popular: React.FC = () => {
<VirtuosoGrid <VirtuosoGrid
useWindowScroll useWindowScroll
data={groups} data={groups}
itemContent={(index, group) => renderGroupGrid(group, index)} itemContent={(_index, group) => renderGroupGrid(group)}
components={{ components={{
Item: (props) => ( Item: (props) => (
<div {...props} className='w-1/2 flex-none' /> <div {...props} className='w-1/2 flex-none pb-4 [&:nth-last-of-type(-n+2)]:pb-0' />
), ),
List: GridList, List: GridList,
}} }}

Wyświetl plik

@ -46,10 +46,8 @@ const Suggested: React.FC = () => {
</div> </div>
), []); ), []);
const renderGroupGrid = useCallback((group: Group, index: number) => ( const renderGroupGrid = useCallback((group: Group) => (
<div className='pb-4'> <GroupGridItem group={group} />
<GroupGridItem group={group} />
</div>
), []); ), []);
return ( return (
@ -73,10 +71,10 @@ const Suggested: React.FC = () => {
<VirtuosoGrid <VirtuosoGrid
useWindowScroll useWindowScroll
data={groups} data={groups}
itemContent={(index, group) => renderGroupGrid(group, index)} itemContent={(_index, group) => renderGroupGrid(group)}
components={{ components={{
Item: (props) => ( Item: (props) => (
<div {...props} className='w-1/2 flex-none' /> <div {...props} className='w-1/2 flex-none pb-4 [&:nth-last-of-type(-n+2)]:pb-0' />
), ),
List: GridList, List: GridList,
}} }}

Wyświetl plik

@ -50,10 +50,8 @@ const Tag: React.FC<ITag> = (props) => {
</div> </div>
), []); ), []);
const renderGroupGrid = useCallback((group: Group, index: number) => ( const renderGroupGrid = useCallback((group: Group) => (
<div className='pb-4'> <GroupGridItem group={group} />
<GroupGridItem group={group} />
</div>
), []); ), []);
if (isLoading || !tag) { if (isLoading || !tag) {
@ -100,10 +98,10 @@ const Tag: React.FC<ITag> = (props) => {
<VirtuosoGrid <VirtuosoGrid
useWindowScroll useWindowScroll
data={groups} data={groups}
itemContent={(index, group) => renderGroupGrid(group, index)} itemContent={(_index, group) => renderGroupGrid(group)}
components={{ components={{
Item: (props) => ( Item: (props) => (
<div {...props} className='w-1/2 flex-none' /> <div {...props} className='w-1/2 flex-none pb-4 [&:nth-last-of-type(-n+2)]:pb-0' />
), ),
List: GridList, List: GridList,
}} }}