Merge pull request #940 from hirosystems/develop

fix mobile banner text

Author: ryanwaits

app/layout.tsx

@@ -41,10 +41,11 @@ export default function RootLayout({
         <Provider>
           <Banner
             id="hiro-hacks"
-            cta="Learn more here"
+            cta="Learn more"
             url="/stacks/hacks"
             startDate="2025-01-19T17:00:00.000Z"
             endDate="2025-06-24T23:59:59.999Z"
+            mobileText="Hiro Hacks is live!"
           >
             Hiro Hacks is live! Get started with this months theme: AI x Stacks
           </Banner>

components/ui/banner.tsx

@@ -32,12 +32,15 @@ export function Banner({
   url = "/",
   startDate,
   endDate,
+  children,
+  mobileText,
   ...props
 }: HTMLAttributes<HTMLDivElement> & {
   cta?: string;
   url?: string;
   startDate?: string;
   endDate?: string;
+  mobileText?: string;
 }): React.ReactElement | null {
   const [open, setOpen] = useState(true);
   const [isWithinDateRange, setIsWithinDateRange] = useState(false);
@@ -88,7 +91,16 @@ export function Banner({
         />
       ) : null}
       <div className="flex items-center justify-center space-x-4">
-        <div>{props.children}</div>
+        <div>
+          {mobileText ? (
+            <>
+              <span className="sm:hidden">{mobileText}</span>
+              <span className="hidden sm:inline">{children}</span>
+            </>
+          ) : (
+            children
+          )}
+        </div>
         {cta && (
           <Button
             size="sm"