updated README.md and added buy me a coffee button

MacielG1 · Jun 4, 2024 · 8b15e16 · 8b15e16
1 parent 2dd7379
commit 8b15e16
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -1 +1,19 @@
-# Timer_Interval
+# [Interval Timer](https://macielg1.github.io/Timer_Interval/)
+
+<p align="center">
+  <a href="https://macielg1.github.io/Timer_Interval/"><img src="https://private-user-images.githubusercontent.com/52795576/336446652-1d398e2f-d3f3-4749-8451-2ffdf5c2563e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTc1MDQwNDcsIm5iZiI6MTcxNzUwMzc0NywicGF0aCI6Ii81Mjc5NTU3Ni8zMzY0NDY2NTItMWQzOThlMmYtZDNmMy00NzQ5LTg0NTEtMmZmZGY1YzI1NjNlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MDQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjA0VDEyMjIyN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTVkMWFkODI2NzQ2ZWJhMGQzODJiNTJhYzMzMWM2ZDAzNmY2Y2QxMGI3ZTVkN2FlMGE4MThmNzY5MzhlOTUyMDQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.LH2tXUQrpEYes4YslZbau-I8y87_XQoX_N9NfqriWlE" alt="Logo" height=80></a>
+</p>
+
+This is a interval timer that allows you to set a work, rest and prepare interval. It works like a tabata timer where you can set the number of rounds and the time for each interval.
+
+## Features
+
+- Set work, rest and prepare interval
+- Set number of rounds
+- Save specific interval settings
+- Export and import interval settings
+- Drag and drop to change order of saved intervals
+- Option to Enable background to match mode color
+- Option to enable sound on interval change
+- Supports 3 languages: English, French and Portuguese
+- and more...
diff --git a/bun.lockb b/bun.lockb
diff --git a/src/App.tsx b/src/App.tsx
@@ -3,20 +3,26 @@ import SettingsMenu from "./components/SettingsMenu";
 import useStore from "./store/useStore";
 import TimerApp from "./components/TimerApp";
 
-function App() {
+export default function App() {
   const bgColor = useStore((state) => state.currentBackgroundColor);
   const enableBackgroundColors = useStore((state) => state.enableBackgroundColors);
 
   return (
     <main
-      className="min-h-screen flex-col bg-neutral-950 px-4 py-1 sm:flex sm:px-6 lg:px-8 2xl:max-h-screen"
+      className="relative min-h-screen flex-col bg-neutral-950 px-4 py-1 sm:flex sm:px-6 lg:px-8 2xl:max-h-screen"
       style={{ backgroundColor: enableBackgroundColors ? bgColor : "#0a0a0a" }}
     >
       <TimerApp />
       <Sidebar />
       <SettingsMenu />
+
+      <a href="https://www.buymeacoffee.com/macielg1" target="_blank" className="invisible fixed bottom-5 right-4 md:visible">
+        <img
+          src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=☕&slug=macielg1&button_colour=0091ff&font_colour=000000&font_family=Inter&outline_colour=000000&coffee_colour=FFDD00"
+          alt="Buy Me A Coffee"
+          className="w-52"
+        />
+      </a>
     </main>
   );
 }
-
-export default App;
diff --git a/src/components/LanguageSwitcher.tsx b/src/components/LanguageSwitcher.tsx
@@ -5,8 +5,8 @@ import { Icons } from "../assets/Icons";
 
 const countries = [
   { name: "en", flag: <Icons.uk className="w-7" /> },
-  { name: "pt", flag: <Icons.br className="w-7 " /> },
-  { name: "fr", flag: <Icons.fr className="w-7 " /> },
+  { name: "pt", flag: <Icons.br className="w-7" /> },
+  { name: "fr", flag: <Icons.fr className="w-7" /> },
 ];
 
 export default function Dropdown() {
@@ -22,24 +22,21 @@ export default function Dropdown() {
   }
 
   return (
-    <div className="flex items-center justify-center pt-3">
-      <div
-        className="hover:border-b-none group flex flex-col justify-center 
-           rounded-lg border border-gray-500 text-sm font-medium tracking-wide text-zinc-200 hover:text-white focus:outline-none  "
-      >
-        <span className="relative flex w-16 items-center  justify-center rounded-lg bg-zinc-700 py-6 ">
+    <div className="flex items-center justify-center pt-2">
+      <div className="hover:border-b-none group flex flex-col justify-center rounded-lg border border-gray-500 text-sm font-medium tracking-wide text-zinc-200 hover:text-white focus:outline-none">
+        <span className="relative flex w-16 items-center justify-center rounded-lg bg-zinc-700 py-6">
           <span className="absolute p-4">{FlagIcon}</span>
-          <Icons.arrowDown className="absolute right-0 h-4 w-4 transition-opacity duration-200 group-hover:opacity-100 " />
+          <Icons.arrowDown className="absolute right-0 h-4 w-4 transition-opacity duration-200 group-hover:opacity-100" />
         </span>
 
-        <div className=" hidden transform whitespace-nowrap rounded-md rounded-t-none bg-zinc-600 shadow-lg  transition  duration-1000 group-hover:block">
+        <div className="hidden transform whitespace-nowrap rounded-md rounded-t-none bg-zinc-600 shadow-lg transition duration-1000 group-hover:block">
           {countries.map((c) => {
             if (c.name !== preferredLanguage) {
               return (
                 <button
                   onClick={handleLanguageSelection.bind(null, c.name as localStorageType["preferredLanguage"])}
                   key={c.name}
-                  className="flex w-full items-center justify-center rounded-none  px-4 py-2 text-sm text-white transition-colors duration-200 hover:bg-zinc-700 last:hover:rounded-b-md "
+                  className="flex w-full items-center justify-center rounded-none px-4 py-2 text-sm text-white transition-colors duration-200 hover:bg-zinc-700 last:hover:rounded-b-md"
                 >
                   {c.flag}
                 </button>

diff --git a/src/components/ModalSettings.tsx b/src/components/ModalSettings.tsx
@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import { createPortal } from "react-dom";
 
 type BackdropProps = {
@@ -16,10 +17,7 @@ export default function ModalSettings({ onClose, content }: ModalSettingsProps)
   let modal = (
     <>
       <Backdrop onClick={onClose} />
-      <div
-        className="fixed right-2 top-14 z-30  mt-1 flex w-fit flex-col gap-2 rounded-lg bg-zinc-700 p-4 shadow-md max-[350px]:right-1 
-      max-[350px]:w-[95%] max-[350px]:p-1 max-[350px]:text-base sm:right-10 "
-      >
+      <div className="fixed right-2 top-14 z-30 mt-1 flex w-fit flex-col gap-2 rounded-lg bg-zinc-700 p-4 shadow-md max-[350px]:right-1 max-[350px]:w-[95%] max-[350px]:p-1 max-[350px]:text-base sm:right-10">
         {content}
       </div>
     </>

diff --git a/src/components/SettingsMenu.tsx b/src/components/SettingsMenu.tsx
@@ -129,6 +129,14 @@ export default function SettingsMenu() {
       })}
       <ImportExportTimers />
       <LanguageSwitcher />
+
+      <a href="https://www.buymeacoffee.com/macielg1" target="_blank" referrerPolicy="no-referrer" className="mx-auto my-2 inline-block md:hidden">
+        <img
+          src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=☕&slug=macielg1&button_colour=0091ff&font_colour=000000&font_family=Inter&outline_colour=000000&coffee_colour=FFDD00"
+          alt="Buy Me A Coffee"
+          className="w-52"
+        />
+      </a>
     </>
   );
 

diff --git a/src/components/TimerApp.tsx b/src/components/TimerApp.tsx
@@ -31,8 +31,7 @@ export default function TimerApp() {
 
   return (
     <section
-      className="relative mx-auto mt-3 flex w-full max-w-sm flex-col rounded-xl border border-gray-500 bg-neutral-950 px-0 py-2 text-center max-md:pb-4 xs:max-w-lg xs:px-2
-    sm:mt-5 sm:max-w-xl sm:px-4 lg:max-w-[41rem] 2xl:mt-10 2xl:max-w-3xl 2xl:py-12"
+      className="relative mx-auto mt-3 flex w-full max-w-sm flex-col rounded-xl border border-gray-500 bg-neutral-950 px-0 py-2 text-center max-md:pb-4 xs:max-w-lg xs:px-2 sm:mt-5 sm:max-w-xl sm:px-4 lg:max-w-[41rem] 2xl:mt-10 2xl:max-w-3xl 2xl:py-12"
       style={{
         borderColor: enableBackgroundColors && removeBorders ? "transparent" : mainTimerBorder,
         borderWidth: mainTimerBorder === "#787777" ? "1px" : "3px",