From 9f99e2a3ac72eda5a6d6039206357bf9fb622e17 Mon Sep 17 00:00:00 2001 From: Alex TYRODE Date: Thu, 1 May 2025 00:53:26 +0000 Subject: [PATCH] feat: replace FeedbackButton with GitHubButton in ExcalidrawWrapper - Removed FeedbackButton component and integrated GitHubButton for improved functionality. - Added GitHubButton component to fetch and display star count from GitHub API. - Introduced new styles for GitHubButton and updated the GitHubIcon for better visual representation. --- src/frontend/src/ExcalidrawWrapper.tsx | 4 +- src/frontend/src/icons/GithubIcon.tsx | 21 ++++---- src/frontend/src/ui/FeedbackButton.tsx | 21 -------- ...{FeedbackButton.scss => GitHubButton.scss} | 17 ++++-- src/frontend/src/ui/GitHubButton.tsx | 52 +++++++++++++++++++ 5 files changed, 77 insertions(+), 38 deletions(-) delete mode 100644 src/frontend/src/ui/FeedbackButton.tsx rename src/frontend/src/ui/{FeedbackButton.scss => GitHubButton.scss} (59%) create mode 100644 src/frontend/src/ui/GitHubButton.tsx diff --git a/src/frontend/src/ExcalidrawWrapper.tsx b/src/frontend/src/ExcalidrawWrapper.tsx index 0ea82f6..e359695 100644 --- a/src/frontend/src/ExcalidrawWrapper.tsx +++ b/src/frontend/src/ExcalidrawWrapper.tsx @@ -1,6 +1,6 @@ import React, { Children, cloneElement, useState, useEffect } from 'react'; import DiscordButton from './ui/DiscordButton'; -import FeedbackButton from './ui/FeedbackButton'; +import GitHubButton from './ui/GitHubButton'; import type { ExcalidrawImperativeAPI } from '@atyrode/excalidraw/types'; import type { NonDeletedExcalidrawElement } from '@atyrode/excalidraw/element/types'; import type { AppState } from '@atyrode/excalidraw/types'; @@ -99,7 +99,7 @@ export const ExcalidrawWrapper: React.FC = ({ renderEmbeddable: (element, appState) => renderCustomEmbeddable(element, appState, excalidrawAPI), renderTopRightUI: renderTopRightUI ?? (() => (
- +
)), diff --git a/src/frontend/src/icons/GithubIcon.tsx b/src/frontend/src/icons/GithubIcon.tsx index dd94550..7da0c8d 100644 --- a/src/frontend/src/icons/GithubIcon.tsx +++ b/src/frontend/src/icons/GithubIcon.tsx @@ -4,32 +4,29 @@ interface GithubIconProps { className?: string; width?: number; height?: number; - stroke?: string; - strokeWidth?: number; + fill?: string; } export const GithubIcon: React.FC = ({ className = "", width = 20, height = 20, - stroke = "currentColor", - strokeWidth = 2, + fill = "currentColor", }) => { return ( - - + ); }; diff --git a/src/frontend/src/ui/FeedbackButton.tsx b/src/frontend/src/ui/FeedbackButton.tsx deleted file mode 100644 index c4209ec..0000000 --- a/src/frontend/src/ui/FeedbackButton.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from "react"; -import { capture } from "../utils/posthog"; -import "./FeedbackButton.scss"; - -const FeedbackButton: React.FC = () => { - const handleClick = () => { - capture("feedback_request"); - }; - - return ( - - ); -}; - -export default FeedbackButton; diff --git a/src/frontend/src/ui/FeedbackButton.scss b/src/frontend/src/ui/GitHubButton.scss similarity index 59% rename from src/frontend/src/ui/FeedbackButton.scss rename to src/frontend/src/ui/GitHubButton.scss index a1fde73..2bad50c 100644 --- a/src/frontend/src/ui/FeedbackButton.scss +++ b/src/frontend/src/ui/GitHubButton.scss @@ -1,25 +1,36 @@ -.feedback-button { +.github-button { + display: flex; + align-items: center; + justify-content: center; height: 2.75rem; padding: 0 1rem; border-radius: 0.5rem; margin-left: 0.275rem; - background: #232329; color: #fff; border: none; cursor: pointer; font-weight: 500; transition: background 0.15s ease-in-out, border 0.15s ease-in-out; + gap: 0.5rem; + font-size: 1.05rem; + font-weight: 500; + color: #c9c9c9; + font-family: "Roboto", sans-serif; &:hover, &:focus { background: #cc6d24; outline: none; } + + .github-icon { + margin-right: 0.15rem; + } } @media (max-width: 730px) { - .feedback-button { + .github-button { display: none !important; } } diff --git a/src/frontend/src/ui/GitHubButton.tsx b/src/frontend/src/ui/GitHubButton.tsx new file mode 100644 index 0000000..5553759 --- /dev/null +++ b/src/frontend/src/ui/GitHubButton.tsx @@ -0,0 +1,52 @@ +import React, { useEffect, useState } from "react"; +import { GithubIcon } from "../icons"; +import "./GitHubButton.scss"; + +const GitHubButton: React.FC = () => { + const [starCount, setStarCount] = useState(null); + + useEffect(() => { + // Fetch star count from GitHub API + fetch("https://api.github.com/repos/pad-ws/pad.ws") + .then(response => response.json()) + .then(data => { + const stars = data.stargazers_count; + + // Format the star count with European number formatting (commas as thousand separators) + let formattedStars; + if (stars >= 1000) { + // For numbers >= 1000, format with commas as thousand separators + // e.g., 1000 -> 1,000, 1500 -> 1,500, etc. + formattedStars = stars.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); + } else { + // For numbers < 1000, just use the number as is + formattedStars = stars.toString(); + } + + setStarCount(formattedStars); + }) + .catch(error => { + console.error("Error fetching GitHub stars:", error); + setStarCount("--"); + }); + }, []); + + return ( + + ); +}; + +export default GitHubButton;