Show details
- -AOSSIE-Theme mobile screen preview. - -
- 
- 
- 
-
-
-
-
-
-
-
-
-
- 
- 
-
- 
- 
-
diff --git a/package-lock.json b/package-lock.json
index 7b743c1..177036b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "support-us-button",
- "version": "1.2.0",
+ "version": "2.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "support-us-button",
- "version": "1.2.0",
+ "version": "2.0.0",
"license": "GNU General Public License v3.0",
"dependencies": {
"tslib": "^2.8.1"
diff --git a/package.json b/package.json
index 7e0c80d..ce221a1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "support-us-button",
- "version": "1.2.0",
+ "version": "2.0.0",
"description": "A customizable and flexible Support Us button component for integrating sponsorship and donation options into web applications.",
"keywords": [
"aossie",
@@ -55,6 +55,7 @@
"sideEffects": false,
"scripts": {
"build": "rollup -c",
+ "dev": "rollup -c -w",
"prepublishOnly": "npm run build"
},
"engines": {
diff --git a/public/AOSSIE_THEME-SPONSOR.jpeg b/public/AOSSIE_THEME-SPONSOR.jpeg
deleted file mode 100644
index 2b4d4a8..0000000
Binary files a/public/AOSSIE_THEME-SPONSOR.jpeg and /dev/null differ
diff --git a/public/AOSSIE_THEME.jpeg b/public/AOSSIE_THEME.jpeg
deleted file mode 100644
index 48b0b91..0000000
Binary files a/public/AOSSIE_THEME.jpeg and /dev/null differ
diff --git a/public/AOSSIE_THEME_CTA.jpeg b/public/AOSSIE_THEME_CTA.jpeg
deleted file mode 100644
index 3e5c016..0000000
Binary files a/public/AOSSIE_THEME_CTA.jpeg and /dev/null differ
diff --git a/public/DARK_THEME.jpeg b/public/DARK_THEME.jpeg
deleted file mode 100644
index f2f7324..0000000
Binary files a/public/DARK_THEME.jpeg and /dev/null differ
diff --git a/public/DARK_THEME_CTA.jpeg b/public/DARK_THEME_CTA.jpeg
deleted file mode 100644
index f71fcf4..0000000
Binary files a/public/DARK_THEME_CTA.jpeg and /dev/null differ
diff --git a/public/DARK_THEME_SPONSOR.png b/public/DARK_THEME_SPONSOR.png
deleted file mode 100644
index 7a10441..0000000
Binary files a/public/DARK_THEME_SPONSOR.png and /dev/null differ
diff --git a/public/Dark-Theme.png b/public/Dark-Theme.png
new file mode 100644
index 0000000..55222ef
Binary files /dev/null and b/public/Dark-Theme.png differ
diff --git a/public/LIGHT_THEME.jpeg b/public/LIGHT_THEME.jpeg
deleted file mode 100644
index 4e7c585..0000000
Binary files a/public/LIGHT_THEME.jpeg and /dev/null differ
diff --git a/public/LIGHT_THEME_CTA.jpeg b/public/LIGHT_THEME_CTA.jpeg
deleted file mode 100644
index 4cf6e28..0000000
Binary files a/public/LIGHT_THEME_CTA.jpeg and /dev/null differ
diff --git a/public/LIGHT_THEME_SPONSOR.png b/public/LIGHT_THEME_SPONSOR.png
deleted file mode 100644
index cf9f353..0000000
Binary files a/public/LIGHT_THEME_SPONSOR.png and /dev/null differ
diff --git a/public/Light-Theme.png b/public/Light-Theme.png
new file mode 100644
index 0000000..f34da24
Binary files /dev/null and b/public/Light-Theme.png differ
diff --git a/src/components/SupportUsButton.tsx b/src/components/SupportUsButton.tsx
index ecd3b45..6fd761a 100644
--- a/src/components/SupportUsButton.tsx
+++ b/src/components/SupportUsButton.tsx
@@ -1,51 +1,17 @@
import React from "react";
import type { supportUsButtonProps } from "../types/index";
import type { Theme } from "../types/index";
-import type { ButtonVariant } from "../types/index";
// Function to get the appropriate classes based on the selected theme, used for styling different sections of the component according to the chosen theme
function classAccordingToTheme(Theme: Theme): string {
switch (Theme) {
- case "AOSSIE":
- return "bg-primary text-black";
case "light":
- return "bg-gray-100 text-gray-800";
+ return "bg-[#F4F4F4] text-[#191919]";
case "dark":
- return "bg-black text-white";
- case "minimal":
- return "bg-transparent text-gray-800 border border-gray-800";
- case "corporate":
- return "bg-blue-600 text-white";
+ return "bg-[#191919] text-[#F4F4F4]";
default:
- return "bg-gray-200 text-gray-800";
- }
-}
-
-// Function to get the appropriate button classes based on the selected button variant, used for styling the call-to-action buttons according to the chosen variant
-function getButtonClasses(buttonVariant: ButtonVariant): string {
- const base =
- "w-full px-5 py-3 font-medium transition-all duration-300 flex items-center justify-center gap-2";
-
- const variant = buttonVariant ?? "AOSSIE";
-
- if (variant === "primary") {
- return `${base} bg-white text-black hover:bg-white/90`;
- }
-
- if (variant === "secondary") {
- return `${base} border border-white/30 text-white hover:bg-white/20`;
- }
-
- if (variant === "ghost") {
- return `${base} text-white/80 hover:text-white hover:bg-white/10 outline-2 outline-white/10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-white/20`;
- }
-
- if (variant === "gradient") {
- return `${base} bg-gradient-to-r from-indigo-500 to-purple-600 text-white`;
+ return "bg-black text-white";
}
-
- // Default to AOSSIE variant
- return `${base} bg-primary hover:bg-primary/90 text-black font-black py-4 transition-all active:scale-[0.98] shadow-lg shadow-primary/20`;
}
// Helper function to validate URLs and prevent XSS through 'javascript:' protocol
@@ -60,422 +26,474 @@ function validateUrl(url?: string): string | undefined {
// Main component function that renders the support us button, taking in various props for customization and rendering different sections such as hero, organization information, sponsors, and call-to-action based on the provided data and selected theme and button variant
function SupportUsButton({
- Theme = "AOSSIE",
- pattern = "AOSSIE",
- hero = {
- title: "Support Our Open Source Project",
- description:
- "Your support helps us continue to develop and maintain our project.",
- sponsorLabel: "You're Sponsoring",
- },
+ Theme = "dark",
organizationInformation,
sponsors,
ctaSection,
- classNames = {
- container: "",
- Hero: "",
- organizationInformation: "",
- sponsors: "",
- ctaSection: "",
- },
- buttonVariant = "AOSSIE",
+ projectInformation,
+ Logo = true,
}: supportUsButtonProps): React.JSX.Element {
- const validatedUrl = validateUrl(organizationInformation?.url);
- const logoContent =
- typeof organizationInformation.logo === "string" ? (
-
- {organizationInformation.logo}
-
- ) : (
- 
+ - {organizationInformation.description} +
+ + {projectInformation?.description}
- "{organizationInformation.projectInformation.description}" -
-+ + {organizationInformation.desc} +
- {ctaSection.description} -
-