@@ -35,66 +35,68 @@ export function AnnouncementBanner(props: {
3535 data-nosnippet = ""
3636 >
3737 < 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 }
38+ < div className = { tcls ( CONTAINER_STYLE ) } >
39+ < div className = "relative" >
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-0 mt-2 mr-2 circular-corners:rounded-lg rounded-sm straight-corners:rounded-none p-1.5 transition-all hover:ring-1 ${ style . close } }
97+ />
98+ ) : null }
99+ </ div >
98100 </ div >
99101 </ div >
100102 </ div >
0 commit comments