diff options
Diffstat (limited to 'browser/components/pocket/content/panels/js/components/PopularTopics')
-rw-r--r-- | browser/components/pocket/content/panels/js/components/PopularTopics/PopularTopics.jsx | 27 | ||||
-rw-r--r-- | browser/components/pocket/content/panels/js/components/PopularTopics/PopularTopics.scss | 54 |
2 files changed, 81 insertions, 0 deletions
diff --git a/browser/components/pocket/content/panels/js/components/PopularTopics/PopularTopics.jsx b/browser/components/pocket/content/panels/js/components/PopularTopics/PopularTopics.jsx new file mode 100644 index 0000000000..517bd6d53b --- /dev/null +++ b/browser/components/pocket/content/panels/js/components/PopularTopics/PopularTopics.jsx @@ -0,0 +1,27 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +import React from "react"; +import TelemetryLink from "../TelemetryLink/TelemetryLink"; + +function PopularTopics(props) { + return ( + <ul className="stp_popular_topics"> + {props.topics?.map((topic, position) => ( + <li key={`item-${topic.topic}`} className="stp_popular_topic"> + <TelemetryLink + className="stp_popular_topic_link" + href={`https://${props.pockethost}/explore/${topic.topic}?${props.utmParams}`} + source={props.source} + position={position} + > + {topic.title} + </TelemetryLink> + </li> + ))} + </ul> + ); +} + +export default PopularTopics; diff --git a/browser/components/pocket/content/panels/js/components/PopularTopics/PopularTopics.scss b/browser/components/pocket/content/panels/js/components/PopularTopics/PopularTopics.scss new file mode 100644 index 0000000000..bacd55ee42 --- /dev/null +++ b/browser/components/pocket/content/panels/js/components/PopularTopics/PopularTopics.scss @@ -0,0 +1,54 @@ +.stp_popular_topics { + padding: 0; + + .stp_popular_topic { + display: inline-block; + + .stp_popular_topic_link { + display: inline-block; + background: #F0F0F4; + border-radius: 4px; + font-size: 0.85rem; + line-height: 1rem; + font-style: normal; + font-weight: 600; + margin-inline-end: 8px; + margin-bottom: 8px; + padding: 4px 8px; + color: #000; + + &:focus { + text-decoration: none; + background: #F0F0F4; + outline: 2px solid #0060df; + outline-offset: 2px; + } + + &:hover { + background: #E0E0E6; + text-decoration: none; + } + + &:active { + background: #CFCFD8; + } + + &::after { + content: " >"; + } + + @include theme_dark { + background: #2B2A33; + color: #FBFBFE; + + &:focus { + outline: 2px solid #00DDFF; + } + + &:hover { + background: #53535d; + } + } + } + } +} |