tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

FollowSectionButtonHighlight.jsx (2656B)

      1 /* This Source Code Form is subject to the terms of the Mozilla Public
      2 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
      3 * You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 
      5 import { FeatureHighlight } from "./FeatureHighlight";
      6 import React, { useCallback } from "react";
      7 
      8 export function FollowSectionButtonHighlight({
      9  arrowPosition,
     10  dispatch,
     11  feature,
     12  handleBlock,
     13  handleDismiss,
     14  messageData,
     15  position,
     16  verticalPosition,
     17 }) {
     18  const onDismiss = useCallback(() => {
     19    handleDismiss();
     20    handleBlock();
     21  }, [handleDismiss, handleBlock]);
     22 
     23  return (
     24    <div
     25      className={`follow-section-button-highlight ${messageData.content?.darkModeDismiss ? "is-inverted-dark-dismiss-button" : ""}`}
     26    >
     27      <FeatureHighlight
     28        position={position}
     29        arrowPosition={arrowPosition}
     30        verticalPosition={verticalPosition}
     31        feature={feature}
     32        dispatch={dispatch}
     33        message={
     34          <div className="follow-section-button-highlight-content">
     35            <picture className="follow-section-button-highlight-image">
     36              <source
     37                srcSet={
     38                  messageData.content?.darkModeImageURL ||
     39                  "chrome://newtab/content/data/content/assets/highlights/omc-newtab-follow.svg"
     40                }
     41                media="(prefers-color-scheme: dark)"
     42              />
     43              <source
     44                srcSet={
     45                  messageData.content?.imageURL ||
     46                  "chrome://newtab/content/data/content/assets/highlights/omc-newtab-follow.svg"
     47                }
     48                media="(prefers-color-scheme: light)"
     49              />
     50              <img width="320" height="195" alt="" />
     51            </picture>
     52            <div className="follow-section-button-highlight-copy">
     53              {messageData.content?.cardTitle ? (
     54                <p className="title">{messageData.content.cardTitle}</p>
     55              ) : (
     56                <p
     57                  className="title"
     58                  data-l10n-id="newtab-section-follow-highlight-title"
     59                />
     60              )}
     61              {messageData.content?.cardMessage ? (
     62                <p className="subtitle">{messageData.content.cardMessage}</p>
     63              ) : (
     64                <p
     65                  className="subtitle"
     66                  data-l10n-id="newtab-section-follow-highlight-subtitle"
     67                />
     68              )}
     69            </div>
     70          </div>
     71        }
     72        openedOverride={true}
     73        showButtonIcon={false}
     74        dismissCallback={onDismiss}
     75        outsideClickCallback={handleDismiss}
     76      />
     77    </div>
     78  );
     79 }