Skip to content
This repository was archived by the owner on Mar 20, 2023. It is now read-only.

Commit 4851cb1

Browse files
KonradSzwarcKonradSzwarc
authored
feat(website): add LiveChat logo to website's header and footer (#383)
* feat(website): add LiveChat logo to website's header and footer * Responsiveness update
1 parent 510ba06 commit 4851cb1

File tree

12 files changed

+292
-130
lines changed

12 files changed

+292
-130
lines changed

‎packages/ui/svg/logos/LiveChatLogoHorizontal.svg‎

Lines changed: 34 additions & 0 deletions
Loading

‎packages/ui/svg/logos/LiveChatLogoSquare.svg‎

Lines changed: 12 additions & 0 deletions
Loading

‎packages/ui/svg/logos/PoweredByLiveChatHorizontal.svg‎

Lines changed: 12 additions & 0 deletions
Loading

‎packages/ui/svg/logos/PoweredByLiveChatVertical.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎packages/website/src/components/Footer/BottomFooter.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from 'react';
2+
3+
import { Flex } from '@coderscamp/ui/components/Flex';
4+
import { Stack } from '@coderscamp/ui/components/Stack';
5+
import { Typography } from '@coderscamp/ui/components/Typography';
6+
import { useBreakpointValue } from '@coderscamp/ui/hooks/useBreakpointValue';
7+
import { VercelLogo } from '@coderscamp/ui/svg/logos/VercelLogo';
8+
9+
import { ExternalLink } from '../ExternalLink';
10+
11+
export const BottomFooter = () => {
12+
const direction = useBreakpointValue({ base: 'column-reverse', md: 'row' } as const);
13+
14+
return (
15+
<Flex borderTop="1px" borderColor="gray.200" minH="70px" align="flex-end" width="100%">
16+
<Stack
17+
justify="space-between"
18+
align="center"
19+
direction={direction}
20+
width="100%"
21+
mt={{ base: '32px', md: '24px' }}
22+
spacing={{ base: '16px', md: '24px' }}
23+
>
24+
<Typography color="gray.400" textAlign={{ base: 'center', md: 'left' }}>
25+
© CodersCamp 2021, wszelkie prawa zastrzeżone.
26+
</Typography>
27+
<ExternalLink href="https://vercel.com/?utm_source=coderscamp&utm_campaign=oss">
28+
<VercelLogo w="212px" h="44px" />
29+
</ExternalLink>
30+
</Stack>
31+
</Flex>
32+
);
33+
};

‎packages/website/src/components/Footer/Footer.data.tsx‎

Lines changed: 39 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,50 @@ import {
1515
TERMS_URL,
1616
} from '@/constants';
1717

18-
interface Social {
18+
export interface Social {
1919
label: string;
2020
icon: ReactElement;
2121
href: string;
2222
}
2323

24-
export const socialMediaIcons: Social[] = [
25-
{ label: 'Link do konta Facebook', icon: <SolidFacebookIcon />, href: 'https://facebook.com/ccrew18' },
26-
{ label: 'Link do konta Instagram', icon: <SolidInstagramIcon />, href: 'https://instagram.com/coderscrew.pl' },
27-
{ label: 'Link do konta LinkedIn', icon: <SolidLinkedinIcon />, href: 'https://linkedin.com/company/coderscrew' },
28-
{ label: 'Link do konta GitHub', icon: <SolidGitHubIcon />, href: 'https://github.com/CodersCrew' },
29-
{ label: 'Link do strony internetowej', icon: <SolidGlobalIcon />, href: 'https://coderscrew.pl' },
24+
export const codersCrewSocials: Social[] = [
25+
{
26+
label: 'Konto Facebook Stowarzyszenia CodersCrew',
27+
icon: <SolidFacebookIcon />,
28+
href: 'https://facebook.com/ccrew18',
29+
},
30+
{
31+
label: 'Konto Instagram Stowarzyszenia CodersCrew',
32+
icon: <SolidInstagramIcon />,
33+
href: 'https://instagram.com/coderscrew.pl',
34+
},
35+
{
36+
label: 'Konto LinkedIn Stowarzyszenia CodersCrew',
37+
icon: <SolidLinkedinIcon />,
38+
href: 'https://linkedin.com/company/coderscrew',
39+
},
40+
{ label: 'Konto GitHub Stowarzyszenia CodersCrew', icon: <SolidGitHubIcon />, href: 'https://github.com/CodersCrew' },
41+
{ label: 'Strona internetowa CodersCrew', icon: <SolidGlobalIcon />, href: 'https://coderscrew.pl' },
42+
];
43+
44+
export const liveChatSocials: Social[] = [
45+
{
46+
label: 'Konto Facebook firmy LiveChat',
47+
icon: <SolidFacebookIcon />,
48+
href: 'https://www.facebook.com/livechatpany',
49+
},
50+
{
51+
label: 'Konto Instagram firmy LiveChat',
52+
icon: <SolidInstagramIcon />,
53+
href: 'https://www.instagram.com/livechat',
54+
},
55+
{
56+
label: 'Konto LinkedIn firmy LiveChat',
57+
icon: <SolidLinkedinIcon />,
58+
href: 'https://www.linkedin.com/company/livechat',
59+
},
60+
{ label: 'Konto GitHub firmy LiveChat', icon: <SolidGitHubIcon />, href: 'https://github.com/livechat' },
61+
{ label: 'Strona internetowa LiveChat', icon: <SolidGlobalIcon />, href: 'https://www.livechat.com' },
3062
];
3163

3264
interface NavItem {

‎packages/website/src/components/Footer/Footer.tsx‎

Lines changed: 2 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,98 +1,8 @@
11
import React from 'react';
22

3-
import { Flex } from '@coderscamp/ui/components/Flex';
4-
import { IconButton } from '@coderscamp/ui/components/IconButton';
5-
import { HStack, Stack, VStack } from '@coderscamp/ui/components/Stack';
6-
import { Typography } from '@coderscamp/ui/components/Typography';
7-
import { useBreakpointValue } from '@coderscamp/ui/hooks/useBreakpointValue';
8-
import { CodersCrewLogo } from '@coderscamp/ui/svg/logos/CodersCrewLogo';
9-
import { VercelLogo } from '@coderscamp/ui/svg/logos/VercelLogo';
10-
11-
import { ExternalLink } from '../ExternalLink';
12-
import { InternalLink } from '../InternalLink';
133
import { Section } from '../Section';
14-
import { footerNav, socialMediaIcons } from './Footer.data';
15-
16-
const FooterNav = () => (
17-
<Stack
18-
direction={{ base: 'column', sm: 'row' }}
19-
spacing={{ base: '40px', md: '80px', lg: '40px', xl: '80px' }}
20-
align={{ base: 'center', sm: 'flex-start' }}
21-
>
22-
{footerNav.map(({ title, items }) => (
23-
<VStack
24-
align={{ base: 'center', sm: 'flex-start' }}
25-
key={title}
26-
spacing="16px"
27-
textAlign={{ base: 'center', sm: 'left' }}
28-
>
29-
<Typography size="sm" color="gray.400" weight="bold" textTransform="uppercase">
30-
{title}
31-
</Typography>
32-
{items.map(({ isExternal, ...linkProps }) => {
33-
const LinkComponent = isExternal ? ExternalLink : InternalLink;
34-
35-
return (
36-
<Typography size="md" color="gray.500" key={linkProps.href}>
37-
<LinkComponent withUnderline={false} {...linkProps} />
38-
</Typography>
39-
);
40-
})}
41-
</VStack>
42-
))}
43-
</Stack>
44-
);
45-
46-
const TopFooter = () => {
47-
return (
48-
<Flex
49-
w="100%"
50-
direction={{ base: 'column', lg: 'row' }}
51-
align={{ base: 'center', lg: 'flex-start' }}
52-
justify="space-between"
53-
>
54-
<Flex maxW="384px" direction="column" align={{ base: 'center', lg: 'flex-start' }} mb={{ base: '64px', lg: 0 }}>
55-
<ExternalLink href="https://coderscrew.pl">
56-
<CodersCrewLogo h="32px" />
57-
</ExternalLink>
58-
<Typography pt="20px" size="md" textAlign={{ base: 'center', lg: 'left' }}>
59-
Organizatorem CodersCamp jest Stowarzyszenie CodersCrew - organizacja non-profit zrzeszająca pasjonatów
60-
dziedzin związanych z IT.
61-
</Typography>
62-
<HStack pt="24px" spacing="16px">
63-
{socialMediaIcons.map(({ label, icon, href }) => (
64-
<IconButton icon={icon} size="md" variant="ghost" aria-label={label} href={href} as="a" key={label} />
65-
))}
66-
</HStack>
67-
</Flex>
68-
<FooterNav />
69-
</Flex>
70-
);
71-
};
72-
73-
const BottomFooter = () => {
74-
const direction = useBreakpointValue({ base: 'column-reverse', md: 'row' } as const);
75-
76-
return (
77-
<Flex borderTop="1px" borderColor="gray.200" minH="70px" align="flex-end" width="100%">
78-
<Stack
79-
justify="space-between"
80-
align="center"
81-
direction={direction}
82-
width="100%"
83-
mt={{ base: '32px', md: '24px' }}
84-
spacing={{ base: '16px', md: '24px' }}
85-
>
86-
<Typography color="gray.400" textAlign={{ base: 'center', md: 'left' }}>
87-
© CodersCamp 2021, wszelkie prawa zastrzeżone.
88-
</Typography>
89-
<ExternalLink href="https://vercel.com/?utm_source=coderscamp&utm_campaign=oss">
90-
<VercelLogo w="212px" h="44px" />
91-
</ExternalLink>
92-
</Stack>
93-
</Flex>
94-
);
95-
};
4+
import { BottomFooter } from './BottomFooter';
5+
import { TopFooter } from './TopFooter';
966

977
export const Footer = () => {
988
return (

0 commit comments

Comments
 (0)