Skip to content
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

Jump to bottom

feat: add docs & discord button #27

Merged
merged 2 commits into from
Sep 14, 2022
Merged

feat: add docs & discord button #27

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
0ef2cb9
feat: add docs & discord button
Fakhri1999 Sep 10, 2022
8c98c8c
feat: update to use Chakra component
Fakhri1999 Sep 12, 2022
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
2 changes: 2 additions & 0 deletions i18n/locales/en/common.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@
"description": "Mocha is a bot for multi-chat cross-server, This bot allows you to send messages to multiple channels at once. You can create a private or public channel and send messages to it. The bot also filters out messages from prohibits mentions",
"invite_button_label": "Taste a Mocha",
"invite_button_arrow_label": "Click me",
"docs_button_label": "Docs",
"discord_button_label": "Discord",
"supported_by": "Supported by"
}
}
2 changes: 2 additions & 0 deletions i18n/locales/id/common.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@
"description": "Mocha adalah bot untuk multi-chat lintas server, Bot ini memungkinkan Anda mengirim pesan ke beberapa saluran sekaligus. Anda dapat membuat saluran pribadi atau publik dan mengirim pesan ke sana. Bot ini juga akan menyaring pesan dari mentions yang berbahaya",
"invite_button_label": "Cicipi Mocha",
"invite_button_arrow_label": "Klik aku",
"docs_button_label": "Dokumentasi",
"discord_button_label": "Discord",
"supported_by": "Didukung oleh"
}
}
6 changes: 6 additions & 0 deletions next.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,12 @@ const nextConfig = {
showVersion: process.env.SHOW_VERSION === 'TRUE',
clientVersion: process.env.COMMIT_HASH || 'local-0.0.1',
isProduction: process.env.NODE_ENV === 'production',
botInvitationUrl:
process.env.BOT_INVITATION_URL ||
'https://discord.com/api/oauth2/authorize?client_id=987974524140146728&permissions=414465853504&scope=applications.commands%20bot',
docsUrl: process.env.DOCS_URL || 'https://mocha-docs.chroma-gaming.xyz/',
discordServerUrl:
process.env.DISCORD_SERVER_URL || 'https://discord.gg/PQnkPABkbd',
},
};

Expand Down
109 changes: 64 additions & 45 deletions src/uikit/Home/HomeContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,12 @@ import {
Heading,
Icon,
Image,
Link,
SimpleGrid,
Stack,
Text,
useColorModeValue,
VStack,
} from '@chakra-ui/react';
import { useTranslation } from 'next-export-i18n';
import getConfig from 'next/config';
Expand Down Expand Up @@ -51,48 +54,64 @@ export function HomeContainer() {
</Text>
</Heading>
<Text color='gray.500'>{t('common.home.description')}</Text>
<Stack
direction='column'
spacing={3}
align='center'
alignSelf='center'
position='relative'>
<a
href='https://discord.com/api/oauth2/authorize?client_id=987974524140146728&permissions=414465853504&scope=applications.commands%20bot'
target='_blank'
rel='noreferrer'>
<Button
bg='yellow.700'
color='white'
rounded='full'
px={6}
_hover={{
bg: 'yellow.800',
}}
_focus={{ bg: 'yellow.900' }}>
{t('common.home.invite_button_label')}
</Button>
</a>
<Box display={{ base: 'none', md: 'block' }}>
<Icon
as={Arrow}
color={useColorModeValue('gray.800', 'gray.300')}
w={71}
position='absolute'
right={-71}
top='10px'
/>
<Text
fontSize='lg'
fontFamily='Caveat'
position='absolute'
right='-90px'
top='-15px'
transform='rotate(10deg)'>
{t('common.home.invite_button_arrow_label')}
</Text>
<VStack spacing={2} alignSelf='center'>
<Box position='relative' w='100%'>
<Link
href={publicRuntimeConfig.botInvitationUrl}
isExternal
_hover={{ textDecoration: 'none' }}>
<Button
w='100%'
bg='yellow.700'
color='white'
rounded='full'
px={6}
_hover={{
bg: 'yellow.800',
}}
_focus={{ bg: 'yellow.900' }}>
{t('common.home.invite_button_label')}
</Button>
</Link>
<Box display={{ base: 'none', md: 'block' }}>
<Icon
as={Arrow}
color={useColorModeValue('gray.800', 'gray.300')}
w={71}
position='absolute'
right={-71}
top='10px'
/>
<Text
fontSize='lg'
fontFamily='Caveat'
position='absolute'
right='-90px'
top='-15px'
transform='rotate(10deg)'>
{t('common.home.invite_button_arrow_label')}
</Text>
</Box>
</Box>
</Stack>
<SimpleGrid columns={{ base: 1, md: 2 }} spacing={2}>
<Link
href={publicRuntimeConfig.docsUrl}
isExternal
_hover={{ textDecoration: 'none' }}>
<Button w='100%' variant='outline' rounded='full' px={6}>
{t('common.home.docs_button_label')}
</Button>
</Link>
<Link
href={publicRuntimeConfig.discordServerUrl}
isExternal
_hover={{ textDecoration: 'none' }}>
<Button w='100%' variant='outline' rounded='full' px={6}>
{t('common.home.discord_button_label')}
</Button>
</Link>
</SimpleGrid>
</VStack>
</Stack>
<Box
position='absolute'
Expand All @@ -116,12 +135,12 @@ export function HomeContainer() {
color='blue.400'
borderBottomWidth='1px'
borderBottomColor='blue.500'>
<a
<Link
href='https://discord.chroma-gaming.xyz'
target='_blank'
rel='noreferrer'>
isExternal
_hover={{ textDecoration: 'none' }}>
{t('common.chroma_developer')}
</a>
</Link>
</Text>
</Flex>
{publicRuntimeConfig.showVersion && (
Expand Down