diff --git a/src/shared/constants.ts b/src/shared/constants.ts index ce94a7b4e..019ce4633 100644 --- a/src/shared/constants.ts +++ b/src/shared/constants.ts @@ -3,6 +3,7 @@ export const MOBILE_W = import.meta.env.VITE_MOBILE; export const DESKTOP_W = 1280; export const IS_DEV = import.meta.env.DEV; export const RS_INTRO_URL = 'https://www.youtube.com/embed/n4unZLVpnaU'; +export const RS_FOUNDATION_YEAR = '2013'; export const PAGE_NAMES = { SCHOOL: 'school', diff --git a/src/widgets/events/constants.ts b/src/widgets/events/constants.ts new file mode 100644 index 000000000..4db33b1f7 --- /dev/null +++ b/src/widgets/events/constants.ts @@ -0,0 +1,14 @@ +import dayjs from 'dayjs'; +import { RS_FOUNDATION_YEAR } from '@/shared/constants'; +import { getActualData } from '@/shared/helpers/getActualData'; +import { events } from 'data'; + +export const maxUpcomingEventsQuantity = 2; +export const actualEvents = getActualData({ + data: events, + staleAfter: 3, +}); + +export const nearestEvents = actualEvents.slice(0, maxUpcomingEventsQuantity); + +export const rsLifetime = dayjs().diff(RS_FOUNDATION_YEAR, 'year'); diff --git a/src/widgets/events/ui/events.module.scss b/src/widgets/events/ui/events.module.scss index 2cd4c84e9..a80aa2a79 100644 --- a/src/widgets/events/ui/events.module.scss +++ b/src/widgets/events/ui/events.module.scss @@ -1,49 +1,41 @@ -.events { - &.content { - display: flex; - align-items: start; - justify-content: space-between; - text-align: left; +.events-content { + display: flex; + align-items: start; + justify-content: space-between; - .info { - width: 460px; - - @include media-laptop-medium { - width: 100%; - } - } + .info { + width: 460px; - .title, - .subtitle { - margin-top: 16px; + @include media-laptop-medium { + width: 100%; } + } - .cards { - display: flex; - gap: 16px; - align-items: center; - justify-content: space-between; - - .event-img { - width: 500px; + .cards { + display: flex; + gap: 16px; + align-items: center; + justify-content: space-between; - @include media-mobile-landscape { - width: 100%; - } - } + .event-img { + width: 500px; - @include media-laptop { - align-self: center; + @include media-mobile-landscape { + width: 100%; } + } - @include media-tablet { - flex-direction: column; - } + @include media-laptop { + align-self: center; } - @include media-laptop-medium { + @include media-tablet { flex-direction: column; - align-items: start; } } + + @include media-laptop-medium { + flex-direction: column; + align-items: start; + } } diff --git a/src/widgets/events/events.test.tsx b/src/widgets/events/ui/events.test.tsx similarity index 97% rename from src/widgets/events/events.test.tsx rename to src/widgets/events/ui/events.test.tsx index 5679c41f1..42e66ba42 100644 --- a/src/widgets/events/events.test.tsx +++ b/src/widgets/events/ui/events.test.tsx @@ -1,6 +1,6 @@ import { screen } from '@testing-library/react'; import { describe, expect, it } from 'vitest'; -import { Events } from './ui/events'; +import { Events } from './events'; import { renderWithRouter } from '@/shared/__tests__/utils'; describe('Events', () => { diff --git a/src/widgets/events/ui/events.tsx b/src/widgets/events/ui/events.tsx index d95c5ea83..39d534f03 100644 --- a/src/widgets/events/ui/events.tsx +++ b/src/widgets/events/ui/events.tsx @@ -1,36 +1,21 @@ -import cn from 'classnames'; import classNames from 'classnames/bind'; import dayjs from 'dayjs'; -import { Event, EventCard } from '@/entities/event'; +import { EventCard } from '@/entities/event'; import photo3 from '@/shared/assets/photo-3.webp'; -import { getActualData } from '@/shared/helpers/getActualData'; import { Image } from '@/shared/ui/image'; import { Paragraph } from '@/shared/ui/paragraph'; import { SectionLabel } from '@/shared/ui/section-label'; import { WidgetTitle } from '@/shared/ui/widget-title'; -import { events } from 'data'; +import { actualEvents, nearestEvents, rsLifetime } from '@/widgets/events/constants'; import styles from './events.module.scss'; const cx = classNames.bind(styles); -const displayedCardsQuantity = 2; - -const actualEvents: Event[] = getActualData({ - data: events, - staleAfter: 3, -}); - -const nearestEvents = actualEvents.slice(0, displayedCardsQuantity); - -const Stub = Community event; - export const Events = () => { - const rsLifetime = dayjs().diff('2013', 'year'); - return ( -
-
+
+
events & meetups Meet us at events @@ -44,16 +29,21 @@ export const Events = () => { {' '} {rsLifetime} {' '} - years we have organized 150+ events for developers in different - cities and countries. + years we have organized 150+ events for developers in different cities and countries.
- {!actualEvents.length && Stub} - - {(nearestEvents as Event[]).map((i) => ( - + {!actualEvents.length && ( + Speaker presenting at an event + )} + + {nearestEvents.map((event) => ( + ))}