@@ -3,6 +3,21 @@ import SupportUsButton from "../src/index";
33import type { Theme , supportUsButtonProps } from "../src/types/index" ;
44import "../src/styles/style.css" ;
55
6+ const DEMO_TEXT = {
7+ headerTitle : "SupportUsButton — Dev Preview" ,
8+ themeLabel : "Theme Prop:" ,
9+ hostBgLabel : "Host BG:" ,
10+ hostFontLabel : "Host Font:" ,
11+ bgLogoLabel : "BG Logo:" ,
12+ toggleLogoAction : "Toggle background logo visibility" ,
13+ options : {
14+ auto : "✨ Auto (Host Adapted)" ,
15+ inherit : "🏛️ Inherit (Host Theme)" ,
16+ light : "☀️ Light" ,
17+ dark : "🌙 Dark" ,
18+ } ,
19+ } ;
20+
621const HOST_BG_MAP : Record < string , { bg : string ; text : string ; label : string } > = {
722 zinc : { bg : "#09090b" , text : "#ffffff" , label : "Dark Zinc (#09090b)" } ,
823 slate : { bg : "#0f172a" , text : "#ffffff" , label : "Slate Dark (#0f172a)" } ,
@@ -90,26 +105,33 @@ export function App() {
90105 < header className = "sticky top-0 z-50 backdrop-blur-md bg-zinc-900/90 border-b border-zinc-800 p-4 flex flex-wrap items-center justify-between gap-4 max-w-7xl mx-auto rounded-b-xl shadow-lg" >
91106 < div className = "flex items-center gap-3" >
92107 < img src = "/aossie_logomark.svg" alt = "AOSSIE Logo" className = "h-8 w-auto brightness-0 invert" />
93- < h1 className = "text-xl font-bold tracking-tight text-white font-sans" > SupportUsButton — Dev Preview </ h1 >
108+ < h1 className = "text-xl font-bold tracking-tight text-white font-sans" > { DEMO_TEXT . headerTitle } </ h1 >
94109 </ div >
95110
96111 < div className = "flex flex-wrap items-center gap-4 font-sans" >
97112 < div className = "flex items-center gap-2" >
98- < span className = "text-sm font-medium text-gray-300" > Theme Prop:</ span >
113+ < label htmlFor = "theme-select" className = "text-sm font-medium text-gray-300" >
114+ { DEMO_TEXT . themeLabel }
115+ </ label >
99116 < select
117+ id = "theme-select"
100118 value = { theme }
101119 onChange = { ( e ) => setTheme ( e . target . value as Theme ) }
102120 className = "px-3 py-1.5 rounded-lg text-sm font-semibold bg-zinc-800 text-amber-400 border border-zinc-700 cursor-pointer focus:outline-none focus:ring-2 focus:ring-amber-500"
103121 >
104- < option value = "auto" > ✨ Auto (Host Adapted)</ option >
105- < option value = "light" > ☀️ Light</ option >
106- < option value = "dark" > 🌙 Dark</ option >
122+ < option value = "auto" > { DEMO_TEXT . options . auto } </ option >
123+ < option value = "inherit" > { DEMO_TEXT . options . inherit } </ option >
124+ < option value = "light" > { DEMO_TEXT . options . light } </ option >
125+ < option value = "dark" > { DEMO_TEXT . options . dark } </ option >
107126 </ select >
108127 </ div >
109128
110129 < div className = "flex items-center gap-2" >
111- < span className = "text-sm font-medium text-gray-300" > Host BG:</ span >
130+ < label htmlFor = "host-bg-select" className = "text-sm font-medium text-gray-300" >
131+ { DEMO_TEXT . hostBgLabel }
132+ </ label >
112133 < select
134+ id = "host-bg-select"
113135 value = { customHostBgKey }
114136 onChange = { ( e ) => setCustomHostBgKey ( e . target . value ) }
115137 className = "px-3 py-1.5 rounded-lg text-sm font-semibold bg-zinc-800 text-blue-400 border border-zinc-700 cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500"
@@ -123,8 +145,11 @@ export function App() {
123145 </ div >
124146
125147 < div className = "flex items-center gap-2" >
126- < span className = "text-sm font-medium text-gray-300" > Host Font:</ span >
148+ < label htmlFor = "host-font-select" className = "text-sm font-medium text-gray-300" >
149+ { DEMO_TEXT . hostFontLabel }
150+ </ label >
127151 < select
152+ id = "host-font-select"
128153 value = { customHostFontKey }
129154 onChange = { ( e ) => setCustomHostFontKey ( e . target . value ) }
130155 className = "px-3 py-1.5 rounded-lg text-sm font-semibold bg-zinc-800 text-emerald-400 border border-zinc-700 cursor-pointer focus:outline-none focus:ring-2 focus:ring-emerald-500"
@@ -138,8 +163,14 @@ export function App() {
138163 </ div >
139164
140165 < div className = "flex items-center gap-2" >
141- < span className = "text-sm font-medium text-gray-300" > BG Logo:</ span >
166+ < label htmlFor = "logo-toggle-button" className = "text-sm font-medium text-gray-300" >
167+ { DEMO_TEXT . bgLogoLabel }
168+ </ label >
142169 < button
170+ id = "logo-toggle-button"
171+ type = "button"
172+ aria-label = { DEMO_TEXT . toggleLogoAction }
173+ aria-pressed = { showLogo }
143174 onClick = { ( ) => setShowLogo ( ! showLogo ) }
144175 className = { `px-4 py-1.5 rounded-lg text-sm font-semibold transition-all duration-200 border cursor-pointer active:scale-95 shadow-sm ${
145176 showLogo
0 commit comments