From a75ed280a192c0a7e8019b850134ef5ad40060b5 Mon Sep 17 00:00:00 2001 From: Rahul Vyas Date: Mon, 9 Mar 2026 02:27:34 +0530 Subject: [PATCH 1/3] chore: add support us button component with customizable themes and button variants --- package-lock.json | 11 + package.json | 3 + src/components/SupportUsButton.tsx | 437 +++++++++++++++++++++++++++++ src/styles/style.css | 20 +- src/types/index.ts | 6 +- tsconfig.json | 2 +- 6 files changed, 474 insertions(+), 5 deletions(-) create mode 100644 src/components/SupportUsButton.tsx diff --git a/package-lock.json b/package-lock.json index ab21f33..9983aad 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "devDependencies": { "@tailwindcss/postcss": "^4.2.1", "@types/react": "^19.2.14", + "@types/react-dom": "^19.2.3", "autoprefixer": "^10.4.27", "postcss": "^8.5.6", "tailwindcss": "^4.2.1", @@ -368,6 +369,16 @@ "csstype": "^3.2.2" } }, + "node_modules/@types/react-dom": { + "version": "19.2.3", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz", + "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "@types/react": "^19.2.0" + } + }, "node_modules/autoprefixer": { "version": "10.4.27", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.27.tgz", diff --git a/package.json b/package.json index 5331847..d12355e 100644 --- a/package.json +++ b/package.json @@ -39,8 +39,11 @@ "devDependencies": { "@tailwindcss/postcss": "^4.2.1", "@types/react": "^19.2.14", + "@types/react-dom": "^19.2.3", "autoprefixer": "^10.4.27", "postcss": "^8.5.6", + "react": "^19.2.4", + "react-dom": "^19.2.4", "tailwindcss": "^4.2.1", "typescript": "^5.9.3" }, diff --git a/src/components/SupportUsButton.tsx b/src/components/SupportUsButton.tsx new file mode 100644 index 0000000..75c22a0 --- /dev/null +++ b/src/components/SupportUsButton.tsx @@ -0,0 +1,437 @@ +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"; + 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"; + 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`; + } + + // 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`; +} + +// 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", + }, + organizationInformation, + sponsors, + ctaSection, + classNames = { + container: "", + Hero: "", + organizationInformation: "", + sponsors: "", + ctaSection: "", + }, + buttonVariant = "AOSSIE", +}: supportUsButtonProps): React.JSX.Element { + return ( + // Container for the support us button, with dynamic classes based on the selected theme and custom class names +
+ {/* Hero section with optional background image*/} +
+ {hero.Image && ( + {hero.Image.alt} + )} + {/* Gradient overlay */} +
+
+ + {/* Hero title and description */} +
+
+
+ + + +
+ +
+

+ {hero.title} +

+

+ {hero.description} +

+
+
+
+ + {/* Organization information section */} +
+
+ {/* Background grid */} +
+
+ + {/* Content container */} +
+ {/* Sponsor label */} + {hero.sponsorLabel && ( + + {hero.sponsorLabel} + + )} + + {/* Organization logo */} +
+ {typeof organizationInformation.logo === "string" ? ( + + + {organizationInformation.logo} + + + ) : ( + {organizationInformation.logo?.alt} + )} +
+ + {/* Organization name and description */} +
+

+ {organizationInformation.name} +

+

+ {organizationInformation.description} +

+
+ + {/* Line */} +
+ + {/* Project information */} +
+

+ ABOUT PROJECT: {organizationInformation.projectInformation.name} +

+

+ "{organizationInformation.projectInformation.description}" +

+
+
+
+
+ + {/* Sponsors section */} +
+ {sponsors && sponsors.length > 0 && ( + // List of sponsors with their logos and links, styled according to the selected theme and custom class names +
+ {/* Sponsor pattern AOSSIE */} + {pattern === "AOSSIE" && ( +
+ )} + {/* Sponsor pattern Grid */} + {pattern === "grid" && ( +
+ )} + {/* Sponsor pattern Dots */} + {pattern === "dots" && ( +
+ )} + + {/* Section title */} +
+
+

+ Our Sponsors +

+ + {/* Underline */} +
+
+
+ + {/* Sponsor logos */} +
+ {sponsors.map((sponsor, index) => ( + +
+ {sponsor.logo ? ( +
+ {sponsor.name} + {/* Sponsor tier icon */} +
+ {/* Platinum tier icon */} + {sponsor.sponsorshipTier === "Platinum" && ( + + + + )} + {/* Gold tier icon */} + {sponsor.sponsorshipTier === "Gold" && ( + + + + )} + {/* Silver tier icon */} + {sponsor.sponsorshipTier === "Silver" && ( + + + + )} + {/* Bronze tier icon */} + {sponsor.sponsorshipTier === "Bronze" && ( + + + + )} +
+
+ ) : ( + + {sponsor.name} + + )} + +
+

{sponsor.name}

+ + {sponsor.sponsorshipTier} + +
+
+ + ))} +
+
+ )} +
+ + {/* Call-to-action section with title, description, and sponsor links */} +
+
+

+ {ctaSection.title} +

+

+ {ctaSection.description} +

+
+ {ctaSection.sponsorLink.map((link, index) => ( + +
+ {link.icon && {link.icon}} +

{link.name}

+
+ + ))} +
+
+
+
+ ); +} + +export default supportUsButton; diff --git a/src/styles/style.css b/src/styles/style.css index a461c50..33d95f8 100644 --- a/src/styles/style.css +++ b/src/styles/style.css @@ -1 +1,19 @@ -@import "tailwindcss"; \ No newline at end of file +@import "tailwindcss"; + +@theme { + --color-primary: #FFD700; + --color-background-light: #F9FAFB; + --color-background-dark: #000000; + --color-surface-dark: #111111; + --color-card-dark: #1A1A1A; +} + +/* Sponsor Patterns */ +.sponsor-pattern-AOSSIE { + background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2391c44a' fill-opacity='0.6'%3E%3Ccircle cx='15' cy='20' r='10'/%3E%3Crect x='5' y='40' width='20' height='20' rx='5'/%3E%3C/g%3E%3C/svg%3E"); +} + +/* Grid Pattern */ +.sponsor-pattern-grid { + background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2391c44a' stroke-opacity='0.4' stroke-width='1'%3E%3Cpath d='M0 0H100M0 20H100M0 40H100M0 60H100M0 80H100M0 100H100'/%3E%3Cpath d='M0 0V100M20 0V100M40 0V100M60 0V100M80 0V100M100 0V100'/%3E%3C/g%3E%3C/svg%3E"); +} diff --git a/src/types/index.ts b/src/types/index.ts index 3f114d8..a715ef7 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -10,7 +10,7 @@ export type Theme = "AOSSIE" | "light" | "dark" | "minimal" | "corporate"; Button Variant ========================================================= */ -export type ButtonVariant = "solid" | "outline" | "ghost" | "gradient"; +export type ButtonVariant = 'AOSSIE'| "primary" | "secondary" | "ghost" | "gradient"; /* ========================= IMAGE TYPE @@ -116,7 +116,7 @@ export type CTASection = { BACKGROUND PATTERNS ========================= */ -export type Pattern = "dots" | "grid" | "stripes" | "none"; +export type Pattern = "AOSSIE" | "dots" | "grid" | "none"; /* ========================= SUPPORT US COMPO PROPS @@ -136,7 +136,7 @@ export interface supportUsButtonProps { organizationInformation: organizationInformation; // List of current sponsors, each with name, optional logo, link, and sponsorship tier - sponsors: sponsors; + sponsors?: sponsors; // Information about the call-to-action section, including title, description, and sponsor links ctaSection: CTASection; diff --git a/tsconfig.json b/tsconfig.json index bfea8ab..55f44e7 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -6,7 +6,7 @@ "outDir": "dist", "strict": true, "jsx": "react-jsx", - "moduleResolution": "nodenext", + "moduleResolution": "node", "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true From 29de80d57eb8f6f7137f2f7b07d1a65095dc7ad7 Mon Sep 17 00:00:00 2001 From: Rahul Vyas Date: Mon, 9 Mar 2026 11:41:50 +0530 Subject: [PATCH 2/3] chore: rename supportUsButton function to SupportUsButton and update class names for consistency --- src/components/SupportUsButton.tsx | 29 +++++++++++++++++----------- src/index.ts | 31 ++++++++++++++++++++++++++++++ 2 files changed, 49 insertions(+), 11 deletions(-) diff --git a/src/components/SupportUsButton.tsx b/src/components/SupportUsButton.tsx index 75c22a0..8e8548f 100644 --- a/src/components/SupportUsButton.tsx +++ b/src/components/SupportUsButton.tsx @@ -49,7 +49,7 @@ function getButtonClasses(buttonVariant: ButtonVariant): string { } // 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({ +function SupportUsButton({ Theme = "AOSSIE", pattern = "AOSSIE", hero = { @@ -73,7 +73,7 @@ function supportUsButton({ return ( // Container for the support us button, with dynamic classes based on the selected theme and custom class names
{/* Hero section with optional background image*/}
@@ -104,11 +104,12 @@ function supportUsButton({ viewBox="0 0 24 24" fill="black" stroke="black" - stroke-width="2" - stroke-linecap="round" - stroke-linejoin="round" + strokeWidth="2" + strokeLinecap="round" + strokeLinejoin="round" className="lucide lucide-heart-icon lucide-heart" > + Support heart icon
@@ -118,7 +119,7 @@ function supportUsButton({ {hero.title}

{hero.description}

@@ -332,6 +333,7 @@ function supportUsButton({ fill="currentColor" viewBox="0 0 24 24" > + Platinum tier icon )} @@ -344,6 +346,7 @@ function supportUsButton({ fill="currentColor" viewBox="0 0 24 24" > + Gold tier icon )} @@ -356,6 +359,7 @@ function supportUsButton({ fill="currentColor" viewBox="0 0 24 24" > + Silver tier icon )} @@ -368,6 +372,7 @@ function supportUsButton({ fill="currentColor" viewBox="0 0 24 24" > + Bronze tier icon )} @@ -384,9 +389,11 @@ function supportUsButton({

{sponsor.name}

- - {sponsor.sponsorshipTier} - + {sponsor.sponsorshipTier && ( + + {sponsor.sponsorshipTier} + + )}
@@ -398,7 +405,7 @@ function supportUsButton({ {/* Call-to-action section with title, description, and sponsor links */}

@@ -434,4 +441,4 @@ function supportUsButton({ ); } -export default supportUsButton; +export default SupportUsButton; diff --git a/src/index.ts b/src/index.ts index e69de29..fd8f182 100644 --- a/src/index.ts +++ b/src/index.ts @@ -0,0 +1,31 @@ +/* ========================================================= + Style +========================================================= */ +import "./styles/style.css"; + + +/* ========================================================= + Components +========================================================= */ + +export { default } from "./components//SupportUsButton"; + +/* ========================================================= + Types +========================================================= */ + +export type { + Theme, + ButtonVariant, + Image, + Hero, + projectInformation, + organizationInformation, + sponsor, + sponsors, + sponsorLink, + CTASection, + Tier, + Pattern, + supportUsButtonProps +} from "./types/index"; \ No newline at end of file From 6d49025e64c92eab1b98029292d9bf146702fddf Mon Sep 17 00:00:00 2001 From: Rahul Vyas Date: Mon, 9 Mar 2026 11:58:14 +0530 Subject: [PATCH 3/3] Fixing import statement and indentation --- src/index.ts | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/index.ts b/src/index.ts index fd8f182..7e915f2 100644 --- a/src/index.ts +++ b/src/index.ts @@ -3,12 +3,11 @@ ========================================================= */ import "./styles/style.css"; - /* ========================================================= Components ========================================================= */ -export { default } from "./components//SupportUsButton"; +export { default } from "./components/SupportUsButton"; /* ========================================================= Types @@ -25,7 +24,7 @@ export type { sponsors, sponsorLink, CTASection, - Tier, - Pattern, - supportUsButtonProps -} from "./types/index"; \ No newline at end of file + Tier, + Pattern, + supportUsButtonProps, +} from "./types/index";