Merge pull request #957 from aisaenok/issues-878

878: Added a new widget Communities.

Author: arthur810629

FirstPR.txt

@@ -1,5 +1,17 @@
 export default {
   translation: {
+    communities: {
+      action_connect_to: 'Присоединиться к сообществу',
+      anchor: 'Сообщество',
+      description: 'Мы объединяем выпускников и участников: общение, обмен опытом, поддержка и совместные проекты.',
+      link_bot_title: 'Бот Карьеры',
+      link_bot_description: 'Автотесты, подсказки по откликам, сопровождение поиска.',
+      link_channel_hexlet_title: 'Телеграм канал Хекслета',
+      link_channel_hexlet_description: 'Анонсы, инсайты, советы по карьере и обучению.',
+      link_channel_vacancies_title: 'Канал вакансии для новичков',
+      link_channel_vacancies_description: 'Свежие джуниор-вакансии и стажировки каждый день.',
+      title: 'Наше сообщество',
+    },
     homePage: {
       greetings: 'Welcome',
       aboutUs: {

firstPR.txt

@@ -1,5 +1,17 @@
 export default {
   translation: {
+    communities: {
+      action_connect_to: 'Присоединиться к сообществу',
+      anchor: 'Сообщество',
+      description: 'Мы объединяем выпускников и участников: общение, обмен опытом, поддержка и совместные проекты.',
+      link_bot_title: 'Бот Карьеры',
+      link_bot_description: 'Автотесты, подсказки по откликам, сопровождение поиска.',
+      link_channel_hexlet_title: 'Телеграм канал Хекслета',
+      link_channel_hexlet_description: 'Анонсы, инсайты, советы по карьере и обучению.',
+      link_channel_vacancies_title: 'Канал вакансии для новичков',
+      link_channel_vacancies_description: 'Свежие джуниор-вакансии и стажировки каждый день.',
+      title: 'Наше сообщество',
+    },
     homePage: {
       greetings: 'Добро пожаловать!',
       aboutUs: {

frontend/src/app/providers/i18n/locales/en.ts

@@ -3,7 +3,7 @@ import '@mantine/core/styles.css'
 
 export const UIProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   return (
-    <MantineProvider>
+    <MantineProvider defaultColorScheme="dark">
       { children }
     </MantineProvider>
   )

frontend/src/app/providers/i18n/locales/ru.ts

@@ -13,8 +13,9 @@ import {
 } from '@mantine/core'
 import { Footer } from '@widgets/Footer'
 import { Header } from '@widgets/Header'
-import { AboutUs } from '@widgets/about-us';
-import { WhoWeAre } from '@widgets/who-we-are';
+import { AboutUs } from '@widgets/about-us'
+import { WhoWeAre } from '@widgets/who-we-are'
+import { Communities } from '@widgets/communities'
 
 type PageSection = {
   id: number
@@ -33,7 +34,15 @@ type IndexProps = {
 
 // Компонент-пустышка для демонстрации пропса pageSections (Потом УДАЛИТЬ!)
 const sample: JSX.Element = (
-  <SimpleGrid cols={2} spacing="xs" bg={alpha('#787878', 0.2)} p="xl" bdrs="lg" bd={'1px solid ' + alpha('#FFFFFF', 0.1)} my={20}>
+  <SimpleGrid
+    cols={2}
+    spacing="xs"
+    bg={alpha('#787878', 0.2)}
+    p="xl"
+    bdrs="lg"
+    bd={'1px solid ' + alpha('#FFFFFF', 0.1)}
+    my={20}
+  >
     <Stack gap="md" align="strech">
       <Title order={1} c="white" fw={700}>
         Привет, мы Хекслет
@@ -88,30 +97,27 @@ const Index: React.FC<IndexProps> = ({ pageSections }) => {
   const repeatCount = 5 // Колличество повторений примера inertia компонента
   const repeatedSamples: React.ReactNode[] = []
   for (let i = 0; i < repeatCount; i++) {
-    repeatedSamples.push(
-      <div key={i}>
-        {sample}
-      </div>
-    )
+    repeatedSamples.push(<div key={i}>{sample}</div>)
   }
   // Конец компонента-пустышки
 
   return (
     <Stack
     // mih="100vh"
-    bg={getGradient({
-      deg: 135,
-      from: 'black',
-      to: '#00031a',
-    }, theme)}
-    justify="space-between"
+      bg={getGradient({
+        deg: 135,
+        from: 'black',
+        to: '#00031a',
+      }, theme)}
+      justify="space-between"
     >
       <Header />
       {/* здесь передаем пропсы страниц для отрисовки, а пока БД пустая я сделал компонент пустышку для демонстрации */}
       <Container size="xl">
-      <AboutUs/> 
-      <WhoWeAre/>
+        <AboutUs />
+        <WhoWeAre />
         {repeatedSamples}
+        <Communities />
       </Container>
       <Footer />
     </Stack>

frontend/src/app/providers/ui/ui.provider.tsx

@@ -0,0 +1,79 @@
+import { Badge, Button, Center, Container, SimpleGrid, Space, Text, Title } from '@mantine/core'
+import { useTranslation } from 'react-i18next'
+import { TelegramLink } from './components/TelegramLink'
+import { openTelegramLink } from './helpers/openTelegramInNewTab'
+
+const TG_USERNAME_HEXLET_CAREER_BOT = 'HexletCareerBot'
+const TG_USERNAME_HEXLET_RU = 'hexlet_ru'
+const TG_USERNAME_HEXLET_JUNIOR_VACANCIES = 'junior_vacancies'
+
+const SIMPLE_GRID_COLS_CONFIG = { base: 1,
+  sm: 2,
+  md: 3 }
+
+export const Communities: React.FC = () => {
+  const { t } = useTranslation()
+
+  return (
+    <Container size="lg" py="xl">
+      <Center>
+        <Badge
+          color="violet"
+          fz="xs"
+          radius="xl"
+          size="lg"
+          variant="light"
+          tt="none"
+          styles={{
+            root: {
+              fontWeight: 'normal',
+            },
+          }}
+        >
+          {t('communities.anchor')}
+        </Badge>
+      </Center>
+      <Space h="md" />
+      <Center>
+        <Title c="white" order={1}>
+          {t('communities.title')}
+        </Title>
+      </Center>
+      <Center>
+        <Text c="white">{t('communities.description')}</Text>
+      </Center>
+      <Space h="md" />
+      <SimpleGrid cols={SIMPLE_GRID_COLS_CONFIG}>
+        <TelegramLink
+          text={t('communities.link_bot_description')}
+          title={t('communities.link_bot_title')}
+          username={TG_USERNAME_HEXLET_CAREER_BOT}
+        />
+        <TelegramLink
+          text={t('communities.link_channel_hexlet_title')}
+          title={t('communities.link_channel_hexlet_title')}
+          username={TG_USERNAME_HEXLET_RU}
+        />
+        <TelegramLink
+          text={t('communities.link_channel_vacancies_description')}
+          title={t('communities.link_channel_vacancies_title')}
+          username={TG_USERNAME_HEXLET_JUNIOR_VACANCIES}
+        />
+      </SimpleGrid>
+      <Space h="md" />
+      <Center>
+        <Button
+          color="black"
+          fz="xs"
+          onClick={() => {
+            openTelegramLink('hexletcommunity')
+          }}
+          radius="md"
+          variant="white"
+        >
+          {t('communities.action_connect_to')}
+        </Button>
+      </Center>
+    </Container>
+  )
+}

frontend/src/pages/Home.tsx

@@ -0,0 +1,36 @@
+import { Paper, Text } from '@mantine/core'
+import { openTelegramLink } from '../helpers/openTelegramInNewTab'
+
+const FONT_SIZE_TELEGRAM_TITLE = 'lg'
+const FONT_SIZE_TELEGRAM_TEXT = 'xs'
+const STYLE_CURSOR_POINTER = { cursor: 'pointer' }
+
+type TProps = {
+  text: string
+  title: string
+  username: string
+}
+
+export const TelegramLink: React.FC<TProps> = (props) => {
+  const { text, title, username } = props
+
+  return (
+    <Paper
+      bg="dark.6"
+      onClick={() => {
+        openTelegramLink(username)
+      }}
+      p="sm"
+      radius="md"
+      style={STYLE_CURSOR_POINTER}
+      withBorder
+    >
+      <Text c="white" fw={500} fz={FONT_SIZE_TELEGRAM_TITLE} ta="left">
+        {title}
+      </Text>
+      <Text c="white" fz={FONT_SIZE_TELEGRAM_TEXT} ta="left">
+        {text}
+      </Text>
+    </Paper>
+  )
+}

frontend/src/widgets/communities/Communities.tsx

@@ -0,0 +1,12 @@
+export function openTelegramLink(username: string) {
+  const tgUrl = `tg://resolve?domain=${username}`;
+  const webUrl = `https://t.me/${username}`;
+
+  const tgWindow = window.open(tgUrl, '_blank', 'noopener,noreferrer');
+
+  setTimeout(() => {
+    if (!tgWindow || tgWindow.closed) {
+      window.open(webUrl, '_blank', 'noopener,noreferrer');
+    }
+  }, 500);
+}

frontend/src/widgets/communities/components/TelegramLink.tsx

@@ -0,0 +1 @@
+export {Communities} from './Communities';