mirror/Compass
1
0
Fork 0
mirror of https://github.com/CompassConnections/Compass.git synced 2026-04-04 06:51:45 -04:00
Code Issues Packages Projects Releases Wiki Activity

Refactor buttons

Browse Source
This commit is contained in:
MartinBraquet
2025-10-10 17:04:26 +02:00
parent dcf9741d69
commit 12c7316524
3 changed files with 32 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
web/components/buttons/general-button.tsx Normal file
View File

@@ -0,0 +1,18 @@
import Link from "next/link";
export const GeneralButton = (props: {
url: string
content: string
}) => {
const {url, content} = props
return <div className="rounded-xl shadow p-6 flex flex-col items-center">
<Link
href={url}
className="px-6 py-2 rounded-full bg-gray-200 text-gray-800 font-semibold text-lg shadow hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 transition"
target={url.startsWith('http') ? '_blank' : undefined}
rel={url.startsWith('http') ? 'noopener noreferrer' : undefined}
>
{content}
</Link>
</div>;
}

26
web/pages/organization.tsx
View File

@@ -1,21 +1,7 @@
import {LovePage} from 'web/components/love-page'
import {GeneralButton} from "web/components/buttons/general-button";
export const Block = (props: {
url: string
content: string
}) => {
const {url, content} = props
return <div className="rounded-xl shadow p-6 flex flex-col items-center">
<a
href={url}
className="px-6 py-2 rounded-full bg-gray-200 text-gray-800 font-semibold text-lg shadow hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 transition"
>
{content}
</a>
</div>;
}
export default function Organization() {
return (
<LovePage trackPageView={'social'}>
@@ -24,11 +10,11 @@ export default function Organization() {
<div className="relative py-8 mt-12 overflow-hidden">
<div className="relative z-10 max-w-3xl mx-auto px-4">
<h3 className="text-4xl font-bold text-center mt-8 mb-8">Organization</h3>
<Block url={'/support'} content={'Support'}/>
<Block url={'/constitution'} content={'Constitution'}/>
<Block url={'/financials'} content={'Financials'}/>
<Block url={'/terms'} content={'Terms and Conditions'}/>
<Block url={'/privacy'} content={'Privacy Policy'}/>
<GeneralButton url={'/support'} content={'Support'}/>
<GeneralButton url={'/constitution'} content={'Constitution'}/>
<GeneralButton url={'/financials'} content={'Financials'}/>
<GeneralButton url={'/terms'} content={'Terms and Conditions'}/>
<GeneralButton url={'/privacy'} content={'Privacy Policy'}/>
</div>
</div>
</div>

30
web/pages/social.tsx
View File

@@ -1,22 +1,8 @@
import {LovePage} from 'web/components/love-page'
import {discordLink, githubRepo, redditLink, stoatLink, xLink, supportEmail} from "common/constants";
import {discordLink, githubRepo, redditLink, stoatLink, supportEmail, xLink} from "common/constants";
import {GeneralButton} from "web/components/buttons/general-button";
export const Block = (props: {
url: string
content: string
}) => {
const {url, content} = props
return <div className="rounded-xl shadow p-6 flex flex-col items-center">
<a
href={url}
className="px-6 py-2 rounded-full bg-gray-200 text-gray-800 font-semibold text-lg shadow hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 transition"
>
{content}
</a>
</div>;
}
export default function Social() {
return (
<LovePage trackPageView={'social'}>
@@ -25,12 +11,12 @@ export default function Social() {
<div className="relative py-8 mt-12 overflow-hidden">
<div className="relative z-10 max-w-3xl mx-auto px-4">
<h3 className="text-4xl font-bold text-center mt-8 mb-8">Social</h3>
<Block url={discordLink} content={'Discord'}/>
<Block url={stoatLink} content={'Revolt / Stoat'}/>
<Block url={redditLink} content={'Reddit'}/>
<Block url={githubRepo} content={'GitHub'}/>
<Block url={xLink} content={'X'}/>
<Block url={`mailto:${supportEmail}`} content={`${supportEmail}`}/>
<GeneralButton url={discordLink} content={'Discord'}/>
<GeneralButton url={stoatLink} content={'Revolt / Stoat'}/>
<GeneralButton url={redditLink} content={'Reddit'}/>
<GeneralButton url={githubRepo} content={'GitHub'}/>
<GeneralButton url={xLink} content={'X'}/>
<GeneralButton url={`mailto:${supportEmail}`} content={`${supportEmail}`}/>
</div>
</div>
</div>