mirror of
https://github.com/roleypoly/roleypoly.git
synced 2025-06-16 17:49:09 +00:00
feat: redesign server listing design language
This commit is contained in:
parent
e5d83bc133
commit
0ed5d696df
4 changed files with 71 additions and 7 deletions
|
@ -3,7 +3,13 @@ import { ServerListingCard } from '@roleypoly/design-system/molecules/server-lis
|
|||
import { getRecentAndSortedGuilds } from '@roleypoly/misc-utils/guildListing';
|
||||
import { GuildSlug } from '@roleypoly/types';
|
||||
import * as React from 'react';
|
||||
import { CardContainer, ContentContainer, SectionHead } from './ServersListing.styled';
|
||||
import { GoHistory, GoListUnordered } from 'react-icons/go';
|
||||
import {
|
||||
CardContainer,
|
||||
ContentContainer,
|
||||
Line,
|
||||
SectionHead,
|
||||
} from './ServersListing.styled';
|
||||
|
||||
type ServersListingProps = {
|
||||
guilds: GuildSlug[];
|
||||
|
@ -32,11 +38,19 @@ export const ServersListing = (props: ServersListingProps) => {
|
|||
<ContentContainer>
|
||||
{recentGuildSlugs.length !== 0 && (
|
||||
<>
|
||||
<SectionHead>Recent Guilds</SectionHead>
|
||||
<SectionHead>
|
||||
<GoHistory />
|
||||
Recent Guilds
|
||||
<Line />
|
||||
</SectionHead>
|
||||
<CardList guilds={recentGuildSlugs} />
|
||||
<SectionHead>All Guilds</SectionHead>
|
||||
</>
|
||||
)}
|
||||
<SectionHead>
|
||||
<GoListUnordered />
|
||||
All Guilds
|
||||
<Line />
|
||||
</SectionHead>
|
||||
<CardList guilds={sortedGuildSlugs} />
|
||||
</ContentContainer>
|
||||
);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue