tor-browser

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

ShortcutFeatureHighlight.jsx (2514B)

      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 React, { useCallback } from "react";
      6 import { FeatureHighlight } from "./FeatureHighlight";
      7 
      8 export function ShortcutFeatureHighlight({
      9  dispatch,
     10  feature,
     11  handleBlock,
     12  handleDismiss,
     13  messageData,
     14  position,
     15 }) {
     16  const onDismiss = useCallback(() => {
     17    handleDismiss();
     18    handleBlock();
     19  }, [handleDismiss, handleBlock]);
     20 
     21  return (
     22    <div
     23      className={`shortcut-feature-highlight ${messageData.content?.darkModeDismiss ? "is-inverted-dark-dismiss-button" : ""}`}
     24    >
     25      <FeatureHighlight
     26        position={position}
     27        feature={feature}
     28        dispatch={dispatch}
     29        message={
     30          <div className="shortcut-feature-highlight-content">
     31            <picture className="follow-section-button-highlight-image">
     32              <source
     33                srcSet={
     34                  messageData.content?.darkModeImageURL ||
     35                  "chrome://newtab/content/data/content/assets/highlights/omc-newtab-shortcuts.svg"
     36                }
     37                media="(prefers-color-scheme: dark)"
     38              />
     39              <source
     40                srcSet={
     41                  messageData.content?.imageURL ||
     42                  "chrome://newtab/content/data/content/assets/highlights/omc-newtab-shortcuts.svg"
     43                }
     44                media="(prefers-color-scheme: light)"
     45              />
     46              <img width="320" height="195" alt="" />
     47            </picture>
     48            <div className="shortcut-feature-highlight-copy">
     49              {messageData.content?.cardTitle ? (
     50                <p className="title">{messageData.content.cardTitle}</p>
     51              ) : (
     52                <p
     53                  className="title"
     54                  data-l10n-id="newtab-shortcuts-highlight-title"
     55                />
     56              )}
     57              {messageData.content?.cardMessage ? (
     58                <p className="subtitle">{messageData.content.cardMessage}</p>
     59              ) : (
     60                <p
     61                  className="subtitle"
     62                  data-l10n-id="newtab-shortcuts-highlight-subtitle"
     63                />
     64              )}
     65            </div>
     66          </div>
     67        }
     68        openedOverride={true}
     69        showButtonIcon={false}
     70        dismissCallback={onDismiss}
     71        outsideClickCallback={handleDismiss}
     72      />
     73    </div>
     74  );
     75 }