diff --git a/components/Button.tsx b/components/Button.tsx index d4c0622..02af311 100644 --- a/components/Button.tsx +++ b/components/Button.tsx @@ -2,7 +2,7 @@ import { ComponentProps } from "preact"; function Button(props: ComponentProps<"button">) { props.className = - "select-none flex nowrap items-center gap-2 cursor-pointer rounded-lg bg-gradient-to-tr from-gray-900 to-gray-800 dark:from-gray-100 dark:to-gray-500 text-center align-middle font-sans text-xs font-bold uppercase text-slate-50 dark:text-slate-950 shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none " + + "select-none flex nowrap items-center gap-2 cursor-pointer rounded-lg bg-gradient-to-tr from-gray-900 to-gray-800 dark:from-gray-100 dark:to-gray-400 text-center align-middle font-sans text-xs font-bold uppercase text-slate-50 dark:text-slate-950 shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none " + (props.className ?? ""); return + + ); +} + +export default BuyMeACoffee; diff --git a/components/BuyMeACoffeeIcon.tsx b/components/BuyMeACoffeeIcon.tsx new file mode 100644 index 0000000..9bdc1fd --- /dev/null +++ b/components/BuyMeACoffeeIcon.tsx @@ -0,0 +1,87 @@ +import { ComponentProps } from "preact"; + +function BuyMeACoffeeIcon(props: ComponentProps<"svg">) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default BuyMeACoffeeIcon; diff --git a/islands/home/CompressingPage.tsx b/islands/home/CompressingPage.tsx index 2d260c5..e36877a 100644 --- a/islands/home/CompressingPage.tsx +++ b/islands/home/CompressingPage.tsx @@ -12,6 +12,7 @@ import AlertList from "@/components/AlertList.tsx"; import InformationCircleIcon from "@/components/InformationCircleIcon.tsx"; import OutlinedButton from "@/components/OutlinedButton.tsx"; import Button from "@/components/Button.tsx"; +import BuyMeACoffee from "@/components/BuyMeACoffee.tsx"; function StatsSection({ total }: { total: Omit }) { return ( @@ -275,6 +276,21 @@ function CompressingPage() { ? ( <> +
+

+ It takes time and effort to build a service like this. +
+ If you like it, consider buying us a coffee :) ! +

+ +
+
+
+

+ I don't care, I just want to compress more images! +

+
+