11import type { ResolvedTheme , ThemePreference } from "../types/weather" ;
2+ import weatherifyLogo from "../assets/weatherify.png" ;
23
34type TopActionsBarProps = {
45 resolvedTheme : ResolvedTheme ;
@@ -8,28 +9,32 @@ type TopActionsBarProps = {
89
910export const TopActionsBar = ( { resolvedTheme, themePreference, onToggleTheme } : TopActionsBarProps ) => {
1011 return (
11- < div className = "flex flex-wrap items-center justify-end gap-2" >
12- < a
13- href = "https://www.tekbyte.net"
14- target = "_blank"
15- rel = "noreferrer"
16- className = "rounded-xl border border-[#7ba2c65c] px-3 py-2 text-sm font-semibold text-weather-ink transition hover:bg-[#ffffff94] dark:border-[#3f61808a] dark:hover:bg-[#1b344a9c]"
17- >
18- Blog
19- </ a >
20- < button
21- type = "button"
22- onClick = { onToggleTheme }
23- className = "rounded-xl bg-weather-accent px-3 py-2 text-sm font-semibold text-white transition hover:brightness-110"
24- aria-label = "Toggle light and dark theme"
25- title = {
26- themePreference === "auto"
27- ? `Auto mode (${ resolvedTheme } )`
28- : `${ themePreference === "dark" ? "Dark" : "Light" } mode`
29- }
30- >
31- { resolvedTheme === "dark" ? "Light Theme" : "Dark Theme" }
32- </ button >
12+ < div className = "flex items-center justify-between gap-3" >
13+ < img src = { weatherifyLogo } alt = "Weatherify logo" width = { 32 } height = { 32 } className = "h-8 w-8 rounded-md object-cover" />
14+
15+ < div className = "ml-auto flex flex-wrap items-center justify-end gap-2" >
16+ < a
17+ href = "https://www.tekbyte.net"
18+ target = "_blank"
19+ rel = "noreferrer"
20+ className = "rounded-xl border border-[#7ba2c65c] px-3 py-2 text-sm font-semibold text-weather-ink transition hover:bg-[#ffffff94] dark:border-[#3f61808a] dark:hover:bg-[#1b344a9c]"
21+ >
22+ Blog
23+ </ a >
24+ < button
25+ type = "button"
26+ onClick = { onToggleTheme }
27+ className = "rounded-xl bg-weather-accent px-3 py-2 text-sm font-semibold text-white transition hover:brightness-110"
28+ aria-label = "Toggle light and dark theme"
29+ title = {
30+ themePreference === "auto"
31+ ? `Auto mode (${ resolvedTheme } )`
32+ : `${ themePreference === "dark" ? "Dark" : "Light" } mode`
33+ }
34+ >
35+ { resolvedTheme === "dark" ? "Light Theme" : "Dark Theme" }
36+ </ button >
37+ </ div >
3338 </ div >
3439 ) ;
3540} ;
0 commit comments