@@ -34,69 +34,67 @@ export function AnnouncementBanner(props: {
34
34
className = "theme-bold:bg-header-background pt-4 pb-2"
35
35
data-nosnippet = ""
36
36
>
37
- < div className = "scroll-nojump" >
38
- < div className = "transition-all duration-300 lg:chat-open:pr-80 xl:chat-open:pr-96" >
39
- < div className = { tcls ( 'relative' , CONTAINER_STYLE ) } >
40
- < Tag
41
- href = { contentRef ?. href ?? '' }
42
- className = { tcls (
43
- 'flex w-full items-start justify-center overflow-hidden circular-corners:rounded-xl rounded-md straight-corners:rounded-none px-4 py-3 text-neutral-strong text-sm theme-bold:ring-1 theme-gradient:ring-1 ring-inset transition-colors' ,
44
- style . container ,
45
- closeable && 'pr-12' ,
46
- hasLink && style . hover
47
- ) }
48
- insights = {
49
- announcement . link
50
- ? {
51
- type : 'link_click' ,
52
- link : {
53
- target : announcement . link . to ,
54
- position : SiteInsightsLinkPosition . Announcement ,
55
- } ,
56
- }
57
- : undefined
58
- }
59
- >
60
- < Icon
61
- icon = { style . icon as IconName }
62
- className = { `mt-0.5 mr-3 size-4 shrink-0 ${ style . iconColor } ` }
63
- />
64
- < div >
65
- { announcement . message }
66
- { hasLink ? (
67
- < div className = { tcls ( LinkStyles , style . link , 'ml-1 inline' ) } >
68
- { contentRef ?. icon ? (
69
- < span className = "mr-1 ml-2 *:inline" >
70
- { contentRef ?. icon }
71
- </ span >
72
- ) : null }
73
- { announcement . link ?. title && (
74
- < span className = "mr-1" > { announcement . link ?. title } </ span >
75
- ) }
76
- < Icon
77
- icon = {
78
- announcement . link ?. to . kind === 'url'
79
- ? 'arrow-up-right'
80
- : 'chevron-right'
81
- }
82
- className = { tcls ( 'mb-0.5 inline size-3' ) }
83
- />
84
- </ div >
85
- ) : null }
86
- </ div >
87
- </ Tag >
88
- { closeable ? (
89
- < Button
90
- iconOnly
91
- icon = "close"
92
- label = { tString ( language , 'close' ) }
93
- variant = "blank"
94
- size = "default"
95
- onClick = { dismissAnnouncement }
96
- className = { `absolute top-0 right-4 mt-2 mr-2 circular-corners:rounded-lg rounded-sm straight-corners:rounded-none p-1.5 transition-all hover:ring-1 sm:right-6 md:right-8 ${ style . close } ` }
97
- />
98
- ) : null }
99
- </ div >
37
+ < div className = "transition-all duration-300 lg:chat-open:pr-80 xl:chat-open:pr-96" >
38
+ < div className = { tcls ( 'relative' , CONTAINER_STYLE ) } >
39
+ < Tag
40
+ href = { contentRef ?. href ?? '' }
41
+ className = { tcls (
42
+ 'flex w-full items-start justify-center overflow-hidden circular-corners:rounded-xl rounded-md straight-corners:rounded-none px-4 py-3 text-neutral-strong text-sm theme-bold:ring-1 theme-gradient:ring-1 ring-inset transition-colors' ,
43
+ style . container ,
44
+ closeable && 'pr-12' ,
45
+ hasLink && style . hover
46
+ ) }
47
+ insights = {
48
+ announcement . link
49
+ ? {
50
+ type : 'link_click' ,
51
+ link : {
52
+ target : announcement . link . to ,
53
+ position : SiteInsightsLinkPosition . Announcement ,
54
+ } ,
55
+ }
56
+ : undefined
57
+ }
58
+ >
59
+ < Icon
60
+ icon = { style . icon as IconName }
61
+ className = { `mt-0.5 mr-3 size-4 shrink-0 ${ style . iconColor } ` }
62
+ />
63
+ < div >
64
+ { announcement . message }
65
+ { hasLink ? (
66
+ < div className = { tcls ( LinkStyles , style . link , 'ml-1 inline' ) } >
67
+ { contentRef ?. icon ? (
68
+ < span className = "mr-1 ml-2 *:inline" >
69
+ { contentRef ?. icon }
70
+ </ span >
71
+ ) : null }
72
+ { announcement . link ?. title && (
73
+ < span className = "mr-1" > { announcement . link ?. title } </ span >
74
+ ) }
75
+ < Icon
76
+ icon = {
77
+ announcement . link ?. to . kind === 'url'
78
+ ? 'arrow-up-right'
79
+ : 'chevron-right'
80
+ }
81
+ className = { tcls ( 'mb-0.5 inline size-3' ) }
82
+ />
83
+ </ div >
84
+ ) : null }
85
+ </ div >
86
+ </ Tag >
87
+ { closeable ? (
88
+ < Button
89
+ iconOnly
90
+ icon = "close"
91
+ label = { tString ( language , 'close' ) }
92
+ variant = "blank"
93
+ size = "default"
94
+ onClick = { dismissAnnouncement }
95
+ className = { `absolute top-0 right-4 mt-2 mr-2 circular-corners:rounded-lg rounded-sm straight-corners:rounded-none p-1.5 transition-all hover:ring-1 sm:right-6 md:right-8 ${ style . close } ` }
96
+ />
97
+ ) : null }
100
98
</ div >
101
99
</ div >
102
100
</ div >
0 commit comments