Skip to content

Commit bdfc290

Browse files
ninedev-ininedev-i
authored
Merge pull request #6 from spb-frontend/feature/optimization
remove styled components
2 parents cc97d98 + 698e15e commit bdfc290

19 files changed

+135
-1671
lines changed

‎.babelrc

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
11
{
2-
"presets": ["next/babel"],
3-
"plugins": ["babel-plugin-styled-components"]
2+
"presets": ["next/babel"]
43
}

‎package.json

+1-3
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,7 @@
2929
"next": "^13.4.2",
3030
"react": "^18.2.0",
3131
"react-dom": "^18.2.0",
32-
"react-icons": "^4.8.0",
33-
"styled-components": "^6.0.3"
32+
"react-icons": "^4.8.0"
3433
},
3534
"devDependencies": {
3635
"@types/isomorphic-fetch": "^0.0.35",
@@ -40,7 +39,6 @@
4039
"@typescript-eslint/parser": ">=5.57.0",
4140
"autoprefixer": "^10.4.14",
4241
"babel-eslint": "^10.1.0",
43-
"babel-plugin-styled-components": "^2.0.2",
4442
"eslint": ">=8.0.0",
4543
"eslint-config-prettier": "^8.8.0",
4644
"eslint-plugin-prettier": "^4.2.1",

‎src/components/BlockAbout/BlockAbout.tsx

+5-37
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@ import React from 'react';
22
import { BlockTitle } from '@/components//BlockTitle/BlockTitle';
33
import { ContentBlock } from '@/components/ContentBlock/ContentBlock';
44
import { TELEGRAM, TWITTER } from '@/constants/urls';
5-
import { Container, DetailedInfo } from './styled';
5+
import styles from './styles.module.css';
66

77
export const BlockAbout = () => (
8-
<Container id="about">
8+
<section id="about" className={styles['blockAbout-container']}>
99
<ContentBlock>
1010
<BlockTitle>О нас</BlockTitle>
1111

12-
<DetailedInfo>
12+
<div className={styles['blockAbout-detailedInfo']}>
1313
<p>
1414
Привет! Мы — <strong>SPB Frontend</strong>, сообщество{' '}
1515
<dfn
@@ -39,39 +39,7 @@ export const BlockAbout = () => (
3939
нашими новостями в <a href={TELEGRAM}>Telegram</a> и{' '}
4040
<a href={TWITTER}>Twitter</a>, чтобы не пропустить анонсы предстоящих событий.
4141
</p>
42-
</DetailedInfo>
43-
44-
{/*<CardsWrapper>
45-
<Card>
46-
<Icon src={mailIcon} alt="Email icon" />
47-
<span>Если хотите <strong>выступить с докладом</strong>, напишите письмо на <Link href={`mailto:${EMAIL}`}>{EMAIL}</Link>.</span>
48-
</Card>
49-
50-
<Card>
51-
<Icon src={breakfastIcon} alt="Breakfast icon" />
52-
<span>Еще по четвергам теперь бывают фронтенд-завтраки в центре города.</span>
53-
</Card>
54-
55-
<Card>
56-
<Icon src={tgIcon} alt="Telegram icon" />
57-
<span>Также, у нас есть Телеграм-чат, где мы общаемся и задаём вопросы: <Link href={TELEGRAM_CHAT} target="_blank">SPB&nbsp;Frontend</Link>.</span>
58-
</Card>
59-
60-
<Card>
61-
<Icon src={drinkupIcon} alt="Drinkup icon" />
62-
<span>Иногда мы проводим дринкапы: встречи в барах без докладов, просто чтобы пообщаться друг с другом, познакомиться, поговорить о наболевшем.</span>
63-
</Card>
64-
65-
<Card>
66-
<Icon src={shareIcon} alt="Share icon" />
67-
<span>Чтобы следить за новыми событиями сообщества, подписывайтесь на <Link href={TELEGRAM} target="_blank">Телеграм канал</Link> или <Link href={TWITTER} target="_blank">Твиттер</Link>.</span>
68-
</Card>
69-
70-
<Card>
71-
<Icon src={partnerIcon} alt="Partner icon" />
72-
<span>Если хотите предложить спонсорство или площадку (от 100 человек), пишите нам на почту <Link href={`mailto:${EMAIL}`}>{EMAIL}</Link>.</span>
73-
</Card>
74-
</CardsWrapper>*/}
42+
</div>
7543
</ContentBlock>
76-
</Container>
44+
</section>
7745
);

‎src/components/BlockAbout/styled.ts

-52
This file was deleted.

‎src/components/BlockAbout/styles.module.css

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.blockAbout-container {
2+
position: relative;
3+
scroll-margin-top: var(--header-height);
4+
5+
&::before {
6+
content: '';
7+
position: absolute;
8+
left: 0;
9+
top: 0;
10+
width: 100%;
11+
height: 100%;
12+
background-repeat: no-repeat;
13+
background-position: center 42%;
14+
background-image: url('./icons/bg-tilda.svg');
15+
mix-blend-mode: var(--background-image-blend-mode);
16+
background-size: contain;
17+
}
18+
}
19+
20+
.blockAbout-detailedInfo {
21+
font-size: var(--font-size-m);
22+
}

‎src/components/BlockMeetups/BlockMeetups.tsx

+18-23
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,61 @@
1+
import Link from 'next/link';
12
import React, { useMemo } from 'react';
23
import { BlockTitle } from '@/components/BlockTitle/BlockTitle';
4+
import { Button } from '@/components/Button/Button';
35
import { ContentBlock } from '@/components/ContentBlock/ContentBlock';
46
import { formatDate } from '@/lib/date';
5-
import {
6-
HeadingWrapper,
7-
MeetupButton,
8-
MeetupListWrapper,
9-
MeetupWrapper,
10-
MeetupTitle,
11-
Person,
12-
PersonWrapper,
13-
PersonTitle,
14-
} from './styled';
7+
import styles from './styles.module.css';
158
import { BlockMeetupsProps, MeetupListProps, BlockMeetupProps } from './types';
169

1710
const MeetupBlock = ({ event }: BlockMeetupProps) => {
1811
const { day, month, year } = useMemo(() => formatDate(event.date), [event.date]);
1912
return (
20-
<MeetupWrapper href={`meetups/${event.id}`}>
21-
<MeetupTitle>{event.title}</MeetupTitle>
13+
<Link className={styles['blockMeetups-item']} href={`meetups/${event.id}`}>
14+
<h3 className={styles['blockMeetups-itemTitle']}>{event.title}</h3>
2215

2316
<time dateTime={`${year}-${month}-${day}`}>
2417
{day}&nbsp;{month}&nbsp;{year}
2518
</time>
2619

27-
<PersonTitle>Участники:</PersonTitle>
20+
<div className={styles['blockMeetups-itemPersonTitle']}>Участники:</div>
2821
{event.talks.map((talk, index) => (
29-
<PersonWrapper key={index}>
22+
<div className={styles['blockMeetups-itemPersonWrapper']} key={index}>
3023
{talk.persons.map((person, key) => (
31-
!!person?.photo && <Person
24+
!!person?.photo && <img
25+
className={styles['blockMeetups-itemPersonPortrait']}
3226
src={person.photo.file.url}
3327
alt={`${person.name} ${person.lastname}`}
3428
title={`${person.name} ${person.lastname}`}
3529
key={key}
3630
/>
3731
))}
38-
</PersonWrapper>
32+
</div>
3933
))}
40-
</MeetupWrapper>
34+
</Link>
4135
);
4236
};
4337
export const MeetupList = ({ events }: MeetupListProps) => (
44-
<MeetupListWrapper>
38+
<div className={styles['blockMeetups-list']}>
4539
{events.map((event, i) => (
4640
<MeetupBlock event={event} key={i} />
4741
))}
48-
</MeetupListWrapper>
42+
</div>
4943
);
5044

5145
export const BlockMeetups = (props: BlockMeetupsProps) => (
5246
<section>
5347
<ContentBlock>
54-
<HeadingWrapper>
48+
<div className={styles['blockMeetups-headingWrapper']}>
5549
<BlockTitle>Митапы</BlockTitle>
56-
<MeetupButton
50+
<Button
51+
className={styles['blockMeetups-button']}
5752
href="/meetups"
5853
variant="contained"
5954
type="primary"
6055
title="Смотреть все митапы">
6156
Смотреть все
62-
</MeetupButton>
63-
</HeadingWrapper>
57+
</Button>
58+
</div>
6459

6560
<MeetupList events={props.events} />
6661
</ContentBlock>

‎src/components/BlockMeetups/styled.ts ‎src/components/BlockMeetups/styles.module.css

+19-24
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,58 @@
1-
import Link from 'next/link';
2-
import styled from 'styled-components';
3-
import { Button } from '@/components//Button/Button';
4-
5-
export const HeadingWrapper = styled.div`
1+
.blockMeetups-headingWrapper {
62
display: flex;
73
align-items: center;
84
justify-content: space-between;
95
margin-bottom: var(--spacer-l);
10-
`;
11-
export const MeetupButton = styled(Button).withConfig({
12-
shouldForwardProp: (prop) => 'message' !== prop,
13-
})`
6+
}
7+
8+
.blockMeetups-button {
149
margin-bottom: var(--spacer-l);
15-
`;
10+
}
1611

17-
export const MeetupListWrapper = styled.div`
12+
.blockMeetups-list {
1813
display: grid;
1914
grid-template-columns: 1fr;
2015
grid-gap: 20px;
21-
16+
2217
@media (min-width: 670px) {
2318
grid-template-columns: 1fr 1fr;
2419
}
2520

2621
@media (min-width: 1025px) {
2722
grid-template-columns: repeat(3, minmax(0, 1fr));
2823
}
29-
`;
24+
}
3025

31-
export const MeetupWrapper = styled(Link)`
26+
.blockMeetups-item {
3227
padding: 40px;
3328
text-decoration: none;
3429
color: var(--text-color);
3530
border: 3px solid rgb(25, 27, 43);
36-
31+
3732
&:hover {
3833
border-color: rgb(var(--color-blue));
3934
}
40-
`;
35+
}
4136

42-
export const MeetupTitle = styled.h3`
37+
.blockMeetups-itemTitle {
4338
text-transform: uppercase;
4439
font-weight: 700;
4540
font-size: 24px;
4641
margin-bottom: 18px;
47-
`;
42+
}
4843

49-
export const PersonTitle = styled.div`
44+
.blockMeetups-itemPersonTitle {
5045
margin: 32px 0 6px;
51-
`;
46+
}
5247

53-
export const PersonWrapper = styled.div`
48+
.blockMeetups-itemPersonWrapper {
5449
display: inline-block;
5550
margin: 12px 12px 0 0;
56-
`;
51+
}
5752

58-
export const Person = styled.img`
53+
.blockMeetups-itemPersonPortrait {
5954
width: 37px;
6055
height: 37px;
6156
border-radius: 50%;
6257
object-fit: cover;
63-
`;
58+
}

‎src/components/ContentBlock/ContentBlock.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React, { PropsWithChildren } from 'react';
2-
import { Container } from './styled';
2+
import styles from './styles.module.css';
33

44
export const ContentBlock = (props: PropsWithChildren) => (
5-
<Container>
5+
<div className={styles['contentBlock-container']}>
66
{props.children}
7-
</Container>
7+
</div>
88
);

‎src/components/ContentBlock/styled.ts ‎src/components/ContentBlock/styles.module.css

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
import styled from 'styled-components';
2-
3-
export const Container = styled.div`
1+
.contentBlock-container {
42
position: relative;
53
padding: 40px 20px;
64

@@ -17,4 +15,5 @@ export const Container = styled.div`
1715
margin: 0 auto;
1816
max-width: 1327px;
1917
}
20-
`;
18+
}
19+

‎src/components/MeetupsHeader/MeetupsHeader.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { PropsWithChildren, useMemo } from 'react';
22
import { formatDate } from '@/lib/date';
3-
import { Content, Wrapper, Heading, EventDate } from './styled';
3+
import styles from './styles.module.css';
44

55
type Props = PropsWithChildren<{
66
title: string;
@@ -15,18 +15,18 @@ export const MeetupsHeader = ({ title, date }: Props) => {
1515
const { day, month, year } = formatDate(date);
1616

1717
return (
18-
<EventDate dateTime={`${year}-${month}-${day}`}>
18+
<time className={styles['meetupsHeader-date']} dateTime={`${year}-${month}-${day}`}>
1919
{day}&nbsp;{month}&nbsp;{year}
20-
</EventDate>
20+
</time>
2121
);
2222
}, [date]);
2323

2424
return (
25-
<Wrapper>
26-
<Content>
25+
<section className={styles['meetupsHeader-wrapper']}>
26+
<div className={styles['meetupsHeader-content']}>
2727
{!!date && dateRender}
28-
<Heading>{ title }</Heading>
29-
</Content>
30-
</Wrapper>
28+
<h1 className={styles['meetupsHeader-heading']}>{ title }</h1>
29+
</div>
30+
</section>
3131
);
3232
};

0 commit comments

Comments
 (0)