Skip to content

chore: revamp community site snippets #208

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jurajkapsz wants to merge 2 commits into
base: master
Choose a base branch
from
Open

chore: revamp community site snippets #208

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6a82ed1
chore: revamp community site snippets
jurajkapsz Apr 3, 2025
ec858b1
fix: Update CommunityPage.module.css
jurajkapsz Apr 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions src/app/(website)/community/CommunityPage.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,30 +23,30 @@
height: 100%;
}

.item header {
.item h2 {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
color: var(--base-color-8);
font-size: 24px;
font-weight: 700;
}

.item header svg {
.item h2 svg {
width: 24px;
height: 24px;
fill: var(--base-color-8);
}

.item p {
color: var(--base-color-7);
flex-grow: 1;
font-size: max(14px, min(2vw, 16px));
font-weight: 400;
text-align: center;
text-wrap: balance;
}

.item a {
align-self: center;
.item div {
width: 100%;
}

@media screen and (max-width: 768px) {
Expand Down
43 changes: 27 additions & 16 deletions src/app/(website)/community/CommunityPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
'use client';
import { Button } from '@umami/react-zen';
import { Box, Heading, Button, Icon, Icons } from '@umami/react-zen';
import PageHeader from '@/components/PageHeader';
import { GITHUB_URL, DISCORD_URL, X_URL, LINKEDIN_URL } from '@/lib/constants';
import { Github, Discord, X, Linkedin } from '@/components/icons';
Expand All @@ -11,25 +11,25 @@ const items = [
description:
'Check out the Umami source code, report issues, request features and join discussions.',
url: GITHUB_URL,
icon: <Github />,
icon: <Github aria-hidden="true" />,
},
{
name: 'Discord',
description: "Chat directly with developers and other users in Umami's Discord channel.",
url: DISCORD_URL,
icon: <Discord />,
icon: <Discord aria-hidden="true" />,
},
{
name: 'Twitter',
description: 'Follow us on Twitter for the latest news and updates.',
url: X_URL,
icon: <X />,
icon: <X aria-hidden="true" />,
},
{
name: 'LinkedIn',
description: 'Learn about our company.',
url: LINKEDIN_URL,
icon: <Linkedin />,
icon: <Linkedin aria-hidden="true" />,
},
];

Expand All @@ -42,17 +42,28 @@ export default function CommunityPage() {
/>
<div className={styles.items}>
{items.map(({ name, description, url, icon }) => (
<div key={name} className={styles.item}>
<header>
{icon} {name}
</header>
<p>{description}</p>
<Button variant="secondary">
<a href={url} target="_blank" data-umami-event={`community-${name}`}>
Explore
</a>
</Button>
</div>
<Box as="article" key={name} className={styles.item}>
<Heading as="h2">
{name} {icon}
</Heading>
<Box as="p">
{description}
</Box>
<Box as="div">
<Button asChild>
<a href={url} target="_blank" data-umami-event={`community-${name}`}>
Explore
<Icon>
{
// see https://github.com/react-icons/react-icons/issues/1029
//@ts-ignore
<Icons.Arrow/>
}
</Icon>
</a>
</Button>
</Box>
</Box>
))}
</div>
</section>
Expand Down