1+ import React from "react" ;
2+ import ReactDOM from "react-dom/client" ;
3+ import SupportUsButton from "../src" ;
4+ import "../src/styles/style.css" ;
5+
6+ ReactDOM . createRoot ( document . getElementById ( "root" ) ! ) . render (
7+ < React . StrictMode >
8+ < div className = "min-h-screen bg-gray-950 text-white flex justify-center" >
9+ < div className = "w-full max-w-6xl px-6 py-10" >
10+ < h1 > SupportUsButton Demo</ h1 >
11+
12+ < SupportUsButton
13+ Theme = "AOSSIE"
14+ pattern = "AOSSIE"
15+ hero = { {
16+ title : "Support Our Open Source Project" ,
17+ description : "Your support helps us grow 🚀" ,
18+ sponsorLabel : "YOU'RE SUPPORTING" ,
19+ } }
20+ organizationInformation = { {
21+ name : "AOSSIE" ,
22+ description : "Open Source Organization" ,
23+ url : "https://aossie.org" ,
24+ logo : {
25+ src : "https://avatars.githubusercontent.com/u/67830633?s=200&v=4" ,
26+ alt : "AOSSIE Logo" ,
27+ } ,
28+ projectInformation : {
29+ name : "SupportUsButton" ,
30+ description : "Reusable donation component" ,
31+ } ,
32+ } }
33+ sponsors = { [
34+ {
35+ name : "GitHub" ,
36+ link : "https://github.com" ,
37+ logo : "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" ,
38+ sponsorshipTier : "Gold" ,
39+ } ,
40+ ] }
41+ ctaSection = { {
42+ title : "Become a Sponsor" ,
43+ description : "Support us via these platforms" ,
44+ sponsorLink : [
45+ {
46+ name : "GitHub Sponsors" ,
47+ url : "https://github.com/sponsors" ,
48+ newTab : true ,
49+ } ,
50+ ] ,
51+ } }
52+ />
53+ </ div >
54+ </ div >
55+ </ React . StrictMode >
56+ ) ;
0 commit comments