roleypoly/v3
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly.git synced 2025-06-16 09:39:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: update prettier tab width for consistency (#175)

Browse source
This commit is contained in:
41666 2021-03-13 22:54:34 -05:00 • committed by GitHub
parent a931f8c69c
commit f24d2fcc99
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
247 changed files with 7224 additions and 7375 deletions
Download patch file Download diff file Expand all files Collapse all files

10
packages/design-system/organisms/servers-listing/ServersListing.stories.tsx
View file

@ -2,11 +2,11 @@ import { mastheadSlugs } from '../../fixtures/storyData';
import { ServersListing } from './ServersListing';
export default {
title: 'Organisms/Servers Listing',
component: ServersListing,
args: {
guilds: mastheadSlugs,
},
title: 'Organisms/Servers Listing',
component: ServersListing,
args: {
guilds: mastheadSlugs,
},
};
export const serversListing = (args) => <ServersListing {...args} />;

32
packages/design-system/organisms/servers-listing/ServersListing.styled.ts
View file

@ -2,26 +2,26 @@ import { onTablet } from '@roleypoly/design-system/atoms/breakpoints';
import styled, { css } from 'styled-components';
export const ContentContainer = styled.div`
display: flex;
flex-direction: column;
max-width: calc(98vw - 15px);
padding-bottom: 25px;
${onTablet(css`
flex-direction: row;
flex-wrap: wrap;
`)}
display: flex;
flex-direction: column;
max-width: calc(98vw - 15px);
padding-bottom: 25px;
${onTablet(css`
flex-direction: row;
flex-wrap: wrap;
`)}
`;
export const CardContainer = styled.div`
box-sizing: border-box;
margin-bottom: 5px;
${onTablet(css`
margin: 5px;
flex-basis: 30%;
max-width: 30%;
`)}
box-sizing: border-box;
margin-bottom: 5px;
${onTablet(css`
margin: 5px;
flex-basis: 30%;
max-width: 30%;
`)}
`;
export const SectionHead = styled.div`
flex: 1 1 100%;
flex: 1 1 100%;
`;

54
packages/design-system/organisms/servers-listing/ServersListing.tsx
View file

@ -6,38 +6,38 @@ import * as React from 'react';
import { CardContainer, ContentContainer, SectionHead } from './ServersListing.styled';
type ServersListingProps = {
guilds: GuildSlug[];
recentGuilds: string[];
guilds: GuildSlug[];
recentGuilds: string[];
};
const CardList = (props: { guilds: GuildSlug[] }) => (
<>
{props.guilds.map((guild, idx) => (
<CardContainer key={idx}>
<CompletelyStylelessLink to={`/s/${guild.id}`}>
<ServerListingCard guild={guild} />
</CompletelyStylelessLink>
</CardContainer>
))}
</>
<>
{props.guilds.map((guild, idx) => (
<CardContainer key={idx}>
<CompletelyStylelessLink to={`/s/${guild.id}`}>
<ServerListingCard guild={guild} />
</CompletelyStylelessLink>
</CardContainer>
))}
</>
);
export const ServersListing = (props: ServersListingProps) => {
const { recentGuildSlugs, sortedGuildSlugs } = getRecentAndSortedGuilds(
props.guilds,
props.recentGuilds
);
const { recentGuildSlugs, sortedGuildSlugs } = getRecentAndSortedGuilds(
props.guilds,
props.recentGuilds
);
return (
<ContentContainer>
{recentGuildSlugs.length !== 0 && (
<>
<SectionHead>Recent Guilds</SectionHead>
<CardList guilds={recentGuildSlugs} />
<SectionHead>All Guilds</SectionHead>
</>
)}
<CardList guilds={sortedGuildSlugs} />
</ContentContainer>
);
return (
<ContentContainer>
{recentGuildSlugs.length !== 0 && (
<>
<SectionHead>Recent Guilds</SectionHead>
<CardList guilds={recentGuildSlugs} />
<SectionHead>All Guilds</SectionHead>
</>
)}
<CardList guilds={sortedGuildSlugs} />
</ContentContainer>
);
};