✨ Add link to github repo

karlosos · Nov 6, 2023 · 9509b33 · 9509b33
1 parent 72c182c
commit 9509b33
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 5 deletions.
diff --git a/src/app/App.tsx b/src/app/App.tsx
@@ -2,6 +2,7 @@ import { createTheme, ThemeProvider } from "@mui/material";
 import { Settings } from "./features/Settings/Settings";
 import { TimeEntriesList } from "./features/TimeEntries/TimeEntriesList";
 import { TopBar } from "./features/TimeEntries/TopBar";
+import { GithubButton } from "./ui/GithubButton";
 
 const theme = createTheme({
   typography: {
@@ -12,8 +13,11 @@ const theme = createTheme({
 function App() {
   return (
     <ThemeProvider theme={theme}>
-      <Settings />
-      <div className="mx-auto flex min-h-screen max-w-screen-sm flex-col px-2 py-4">
+      <div className="right-0 mx-auto flex max-w-screen-sm items-center justify-end gap-1 px-2 py-1 mobile:absolute mobile:top-4 mobile:flex-col mobile:items-end mobile:justify-center mobile:py-0">
+        <Settings />
+        <GithubButton />
+      </div>
+      <div className="mx-auto flex min-h-screen max-w-screen-sm flex-col px-2 py-4 max-mobile:py-0">
         <TopBar />
         <TimeEntriesList />
       </div>

diff --git a/src/app/features/Settings/Settings.tsx b/src/app/features/Settings/Settings.tsx
@@ -16,9 +16,7 @@ export const Settings = () => {
     <>
       <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
         <DialogTrigger asChild>
-          <div className="absolute right-2 top-4 max-mobile:static max-mobile:mx-auto max-mobile:-mb-2 max-mobile:flex max-mobile:max-w-screen-sm max-mobile:justify-end max-mobile:px-2 max-mobile:pt-2">
-            <SettingsButton />
-          </div>
+          <SettingsButton />
         </DialogTrigger>
         <DialogContent>
           <DialogTitle>Settings</DialogTitle>

diff --git a/src/app/ui/GithubButton.tsx b/src/app/ui/GithubButton.tsx
@@ -0,0 +1,19 @@
+import { GitHub as MuiGithubIcon } from "@mui/icons-material";
+
+export const GithubButton = () => {
+  return (
+    <a
+      href="https://github.com/karlosos/time-task-tracker"
+      target="_blank"
+      rel="noreferrer"
+    >
+      <button
+        className="flex cursor-pointer items-center gap-1 rounded-lg border border-neutral-300 bg-neutral-50 px-3 py-1 text-xs font-semibold text-neutral-700 hover:bg-neutral-100 hover:text-neutral-900"
+        tabIndex={0}
+      >
+        <span>Star me on GitHub</span>
+        <MuiGithubIcon fontSize="small" />
+      </button>
+    </a>
+  );
+};