import * as fui from "@fluentui/react-components"; import { InfoRegular, PersonFeedbackRegular } from "@fluentui/react-icons"; import Package from "../../package.json"; import BuyMeACoffee from "../Assets/BuyMeACoffee.svg?react"; import { bmcDarkTheme, bmcLightTheme } from "../Data/BmcTheme"; import { GetFeedbackLink, GithubLink, PersonalLink } from "../Data/Links"; import { GetLocaleString as loc } from "../Utils/Localization"; import { useTheme } from "../Utils/Theme"; import { useStyles } from "./AboutSection.styles"; export default function AboutSection(): JSX.Element { const bmcTheme = useTheme(bmcLightTheme, bmcDarkTheme); const cls = useStyles(); const link = (text: string, href: string): JSX.Element => ( { text } ); const buttonProps = (href: string, icon: JSX.Element): fui.ButtonProps => ( { as: "a", target: "_blank", href, appearance: "primary", icon } ); return ( }>{ loc("about@title") }
{ loc("name") } v{ Package.version }
{ loc("about@developedBy") } ({ link("@xfox111", PersonalLink.Twitter) })
{ loc("about@licensedUnder") } { link(loc("about@mitLicense"), GithubLink.License) }
{ loc("about@translationCta") }
{ link(loc("about@translationCtaButton"), GithubLink.TranslationGuide) }
{ link(loc("about@website"), PersonalLink.Website) }
{ link(loc("about@sourceCode"), GithubLink.Repository) }
{ link(loc("about@changelog"), GithubLink.Changelog) }
) }> { loc("about@feedback") } ) }> { loc("about@sponsor") }
); }