add button "star project" for all projects

Author: anton129

public/locales/en/library.json

@@ -4,12 +4,12 @@
     "readme": "Readme",
     "changelog": "Changelog",
     "about": "About library",
-    "stars": "Stars",
+    "stars": "Support library with a star",
     "version": "Version",
     "lastUpdate": "Last update",
     "repository": "Repository",
     "license": "License",
     "issues": "Issues",
     "maintainers": "Maintainers",
     "contributors": "Contributors"
-}
+}

public/locales/es/library.json

@@ -4,12 +4,12 @@
     "readme": "Léeme",
     "changelog": "Registro de cambios",
     "about": "Acerca de la biblioteca",
-    "stars": "Estrellas",
+    "stars": "Apoya la biblioteca con una estrella",
     "version": "Versión",
     "lastUpdate": "Última actualización",
     "repository": "Repositorio",
     "license": "Licencia",
     "issues": "Cuestiones",
     "maintainers": "Mantenedores",
     "contributors": "Colaboradores"
-}
+}

public/locales/ru/library.json

@@ -4,12 +4,12 @@
     "readme": "Readme",
     "changelog": "Changelog",
     "about": "О библиотеке",
-    "stars": "Звёзды",
+    "stars": "Поддержите библиотеку звёздочкой",
     "version": "Версия",
     "lastUpdate": "Последнее обновление",
     "repository": "Репозиторий",
     "license": "Лицензия",
     "issues": "Задачи",
     "maintainers": "Maintainers",
     "contributors": "Участники"
-}
+}

public/locales/zh/library.json

@@ -4,12 +4,12 @@
     "readme": "自述文件",
     "changelog": "变更日志",
     "about": "关于图书馆",
-    "stars": "明星",
+    "stars": "用星星支持图书馆",
     "version": "版本",
     "lastUpdate": "上次更新",
     "repository": "存储库",
     "license": "执照",
     "issues": "问题",
     "maintainers": "维护者",
     "contributors": "贡献者"
-}
+}

src/components/GitHubStarButton/GitHubStarButton.scss

@@ -0,0 +1,39 @@
+@use '../../variables.scss';
+
+$block: '.#{variables.$ns}github-star-button';
+
+#{$block} {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-decoration: none;
+    border-radius: 8px;
+    transition: opacity 0.2s ease;
+    background: rgba(255, 255, 255, 1);
+    color: var(--g-color-text-dark-primary);
+    height: 36px;
+    width: 136px;
+
+    &:hover {
+        opacity: 0.8;
+    }
+
+    &__button {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        padding: 5px 8px;
+        border: none;
+        color: var(--g-color-text-dark-primary);
+    }
+
+    &__divider {
+        width: 1px;
+        background: rgba(217, 217, 217, 1);
+        height: 20px;
+    }
+
+    &__count {
+        padding: 5px 8px;
+    }
+}

src/components/GitHubStarButton/GitHubStarButton.tsx

@@ -0,0 +1,40 @@
+import {Icon, Text} from '@gravity-ui/uikit';
+import React from 'react';
+
+import githubIcon from '../../assets/icons/github.svg';
+
+import './GitHubStarButton.scss';
+
+const block = (name: string) => `gravity-ui-landing-github-star-button${name ? `__${name}` : ''}`;
+const b = block;
+
+interface GitHubStarButtonProps {
+    githubId: string;
+    starCount: number;
+}
+
+export const GitHubStarButton: React.FC<GitHubStarButtonProps> = ({githubId, starCount}) => {
+    const githubUrl = `https://github.com/${githubId}`;
+
+    const formatStarCount = (count: number): string => {
+        if (count >= 1000) {
+            return `${(count / 1000).toFixed(1)}k`;
+        }
+        return count.toString();
+    };
+
+    return (
+        <a href={githubUrl} target="_blank" rel="noopener noreferrer" className={b('')}>
+            <div className={b('button')}>
+                <Icon data={githubIcon} size={20} className={b('icon')} />
+                <Text variant="body-1" className={b('text')}>
+                    Stars
+                </Text>
+            </div>
+            <div className={b('divider')} />
+            <Text variant="body-1" className={b('count')}>
+                {formatStarCount(starCount)}
+            </Text>
+        </a>
+    );
+};

src/components/GitHubStarButton/index.ts

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

src/components/Library/Library.scss

@@ -12,6 +12,7 @@ $block: '.#{variables.$ns}library';
         & &__header-grid {
             .container-fluid {
                 padding: 0;
+
                 .col {
                     padding: 0;
                 }
@@ -245,6 +246,48 @@ $block: '.#{variables.$ns}library';
         }
     }
 
+    &__info-item_github-star {
+        padding: 16px;
+
+        &:first-child {
+            margin-top: 16px;
+        }
+    }
+
+    &__github-star-content {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        width: 100%;
+    }
+
+    &__github-star-text {
+        display: flex;
+        width: 100%;
+    }
+
+    &__github-star-mobile {
+        display: none;
+
+        @media (max-width: map-get(pcVariables.$gridBreakpoints, 'lg') - 1) {
+            display: flex;
+            justify-content: center;
+            padding-right: 16px;
+
+            &_mobile-invisible {
+                display: none;
+            }
+        }
+    }
+
+    &__github-star-title {
+        font-size: 13px;
+        line-height: 18px;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 0.6);
+        text-align: center;
+    }
+
     &__contributors-content {
         display: block;
 

src/components/Library/Library.tsx

@@ -14,6 +14,7 @@ import starIcon from '../../assets/icons/star.svg';
 import storybookIcon from '../../assets/icons/storybook.svg';
 import versionIcon from '../../assets/icons/version.svg';
 import {ContributorList} from '../../components/ContributorList';
+import {GitHubStarButton} from '../../components/GitHubStarButton';
 import {Link} from '../../components/Link';
 import {useLocale} from '../../hooks/useLocale';
 import {availablePlaygrounds} from '../../pages/libraries/[libId]/playground';
@@ -60,7 +61,6 @@ export const Library: React.FC<Props> = ({lib}) => {
         {
             id: 'stars',
             title: t('library:stars'),
-            value: lib.metadata.stars,
             icon: starIcon,
         },
         {
@@ -258,6 +258,18 @@ export const Library: React.FC<Props> = ({lib}) => {
                                     }}
                                 >
                                     <div className={b('info-title-text')}>{t('library:about')}</div>
+
+                                    <div
+                                        className={b('github-star-mobile', {
+                                            'mobile-invisible': isVisibleInfoListMobile,
+                                        })}
+                                    >
+                                        <GitHubStarButton
+                                            githubId={lib.config.githubId}
+                                            starCount={lib.metadata.stars}
+                                        />
+                                    </div>
+
                                     <div
                                         className={b('info-title-icon', {
                                             'mobile-visible': isVisibleInfoListMobile,
@@ -310,6 +322,27 @@ export const Library: React.FC<Props> = ({lib}) => {
                                             );
                                         }
 
+                                        if (item.id === 'stars') {
+                                            return (
+                                                <div
+                                                    key={item.id}
+                                                    className={b('info-item', {
+                                                        'github-star': true,
+                                                    })}
+                                                >
+                                                    <div className={b('github-star-content')}>
+                                                        <div className={b('github-star-text')}>
+                                                            {content}
+                                                        </div>
+                                                        <GitHubStarButton
+                                                            githubId={lib.config.githubId}
+                                                            starCount={lib.metadata.stars}
+                                                        />
+                                                    </div>
+                                                </div>
+                                            );
+                                        }
+
                                         return (
                                             <div key={item.id} className={b('info-item')}>
                                                 {content}