From 9b9d95945f170f3c651a469c3b8378d910277aa2 Mon Sep 17 00:00:00 2001 From: anton129 Date: Thu, 2 Oct 2025 15:14:02 +0300 Subject: [PATCH] add button "star project" for all projects --- public/locales/en/library.json | 4 +- public/locales/es/library.json | 4 +- public/locales/ru/library.json | 4 +- public/locales/zh/library.json | 4 +- .../GitHubStarButton/GitHubStarButton.scss | 39 +++++++++++++++++ .../GitHubStarButton/GitHubStarButton.tsx | 40 +++++++++++++++++ src/components/GitHubStarButton/index.ts | 1 + src/components/Library/Library.scss | 43 +++++++++++++++++++ src/components/Library/Library.tsx | 37 +++++++++++++++- 9 files changed, 167 insertions(+), 9 deletions(-) create mode 100644 src/components/GitHubStarButton/GitHubStarButton.scss create mode 100644 src/components/GitHubStarButton/GitHubStarButton.tsx create mode 100644 src/components/GitHubStarButton/index.ts diff --git a/public/locales/en/library.json b/public/locales/en/library.json index c6ad8dde8b85..801c79ac677f 100644 --- a/public/locales/en/library.json +++ b/public/locales/en/library.json @@ -4,7 +4,7 @@ "readme": "Readme", "changelog": "Changelog", "about": "About library", - "stars": "Stars", + "stars": "Support library with a star", "version": "Version", "lastUpdate": "Last update", "repository": "Repository", @@ -12,4 +12,4 @@ "issues": "Issues", "maintainers": "Maintainers", "contributors": "Contributors" -} +} \ No newline at end of file diff --git a/public/locales/es/library.json b/public/locales/es/library.json index 87f8afa9d2b3..26d5729d6852 100644 --- a/public/locales/es/library.json +++ b/public/locales/es/library.json @@ -4,7 +4,7 @@ "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", @@ -12,4 +12,4 @@ "issues": "Cuestiones", "maintainers": "Mantenedores", "contributors": "Colaboradores" -} +} \ No newline at end of file diff --git a/public/locales/ru/library.json b/public/locales/ru/library.json index 6e59e49272fc..78b8c8a949f9 100644 --- a/public/locales/ru/library.json +++ b/public/locales/ru/library.json @@ -4,7 +4,7 @@ "readme": "Readme", "changelog": "Changelog", "about": "О библиотеке", - "stars": "Звёзды", + "stars": "Поддержите библиотеку звёздочкой", "version": "Версия", "lastUpdate": "Последнее обновление", "repository": "Репозиторий", @@ -12,4 +12,4 @@ "issues": "Задачи", "maintainers": "Maintainers", "contributors": "Участники" -} +} \ No newline at end of file diff --git a/public/locales/zh/library.json b/public/locales/zh/library.json index 655fcb8ae0d2..fbeb0dc99635 100644 --- a/public/locales/zh/library.json +++ b/public/locales/zh/library.json @@ -4,7 +4,7 @@ "readme": "自述文件", "changelog": "变更日志", "about": "关于图书馆", - "stars": "明星", + "stars": "用星星支持图书馆", "version": "版本", "lastUpdate": "上次更新", "repository": "存储库", @@ -12,4 +12,4 @@ "issues": "问题", "maintainers": "维护者", "contributors": "贡献者" -} +} \ No newline at end of file diff --git a/src/components/GitHubStarButton/GitHubStarButton.scss b/src/components/GitHubStarButton/GitHubStarButton.scss new file mode 100644 index 000000000000..163771376238 --- /dev/null +++ b/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; + } +} diff --git a/src/components/GitHubStarButton/GitHubStarButton.tsx b/src/components/GitHubStarButton/GitHubStarButton.tsx new file mode 100644 index 000000000000..e8d5696a0193 --- /dev/null +++ b/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 = ({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 ( + +
+ + + Stars + +
+
+ + {formatStarCount(starCount)} + + + ); +}; diff --git a/src/components/GitHubStarButton/index.ts b/src/components/GitHubStarButton/index.ts new file mode 100644 index 000000000000..190238b4f15d --- /dev/null +++ b/src/components/GitHubStarButton/index.ts @@ -0,0 +1 @@ +export {GitHubStarButton} from './GitHubStarButton'; diff --git a/src/components/Library/Library.scss b/src/components/Library/Library.scss index 7a25c1e01a65..89b6b4b3a6b4 100644 --- a/src/components/Library/Library.scss +++ b/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; diff --git a/src/components/Library/Library.tsx b/src/components/Library/Library.tsx index ea90f5ae0ca4..b032ce125f43 100644 --- a/src/components/Library/Library.tsx +++ b/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 = ({lib}) => { { id: 'stars', title: t('library:stars'), - value: lib.metadata.stars, icon: starIcon, }, { @@ -258,6 +258,18 @@ export const Library: React.FC = ({lib}) => { }} >
{t('library:about')}
+ +
+ +
+
= ({lib}) => { ); } + if (item.id === 'stars') { + return ( +
+
+
+ {content} +
+ {isVisibleInfoListMobile && ( + + )} +
+
+ ); + } + return (
{content}