-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add iconoir-react dependency, update component styles, and refi…
…ne layout for FeedList and PodcastCard
- Loading branch information
1 parent
434e9d9
commit 8005400
Showing
13 changed files
with
238 additions
and
78 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,42 +1,55 @@ | ||
| import React from "react"; | ||
| import "./FeedList.css"; | ||
| import Slbutton from "@shoelace-style/shoelace/dist/react/button"; | ||
| import SlCard from "@shoelace-style/shoelace/dist/react/card"; | ||
| import Masonry, { ResponsiveMasonry } from "react-responsive-masonry"; | ||
|
|
||
| const FeedList = ({ feeds, onRemoveFeed }) => { | ||
| const gutterSize = "12px"; // Define the gutter size | ||
|
|
||
| const FeedList = ({ feeds }) => { | ||
| return ( | ||
| <div className="feed-list"> | ||
| {feeds.map((feed, index) => ( | ||
| <div className="feed-card" key={index}> | ||
| <div className="feed-card-header"> | ||
| <img | ||
| src={feed.favicon} | ||
| alt={`${feed.feedTitle} icon`} | ||
| className="feed-icon" | ||
| /> | ||
| <div className="feed-info"> | ||
| <h3 className="feed-title">{feed.siteTitle}</h3> | ||
| <a href={feed.url} target="_blank" rel="noopener noreferrer" className="feed-url"> | ||
| {feed.feedUrl} | ||
| </a> | ||
| <div className="feed-actions"> | ||
|
|
||
| <Slbutton >Similar Feeds</Slbutton> | ||
| <ResponsiveMasonry | ||
| columnsCountBreakPoints={{ 450:1, 550: 1, 650:2, 1200: 2 }} | ||
| style={{ margin: '24px 24px' }} | ||
|
|
||
| > | ||
| <Masonry gutter={gutterSize}> | ||
| {feeds.map((feed, index) => ( | ||
| <SlCard className="feed-card"> | ||
| <div className="feed-card-content" key={index}> | ||
| <div className="feed-card-header"> | ||
| <img | ||
| src={feed.favicon} | ||
| alt={`${feed.feedTitle} icon`} | ||
| className="feed-icon" | ||
| /> | ||
| <div className="feed-info"> | ||
| <h3 className="feed-title">{feed.siteTitle}</h3> | ||
| <div className="feed-url"> | ||
| <a href={feed.url} target="_blank" rel="noopener noreferrer" className="feed-url"> | ||
| {feed.feedUrl} | ||
| </a> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
| <div className="feed-description"> | ||
| <p>{feed.description}</p> | ||
| </div> | ||
| <div className="feed-stats"> | ||
|
|
||
| </div> | ||
| <div className="feed-actions"> | ||
| <Slbutton onClick={()=> onRemoveFeed(feed.feedUrl)}>Remove feed</Slbutton> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="feed-description"> | ||
| <p>{feed.description}</p> | ||
|
|
||
|
|
||
| </div> | ||
| <div className="feed-stats"> | ||
| <span>{feed.followers} followers</span> | ||
| <span>{feed.articlesPerWeek} articles per week</span> | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </SlCard> | ||
| ))} | ||
| </Masonry> | ||
| </ResponsiveMasonry> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default FeedList; | ||
| export default FeedList; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,66 @@ | ||
| .card .podcast-audio-player { | ||
| .podcast-card { | ||
| overflow: hidden; | ||
| position: relative; | ||
| padding: 0; | ||
| row-gap: 0; | ||
| -webkit-border-radius: 40px; | ||
| border-radius: 40px; | ||
| width: 100%; | ||
| display: flex; | ||
| flex-direction: column; | ||
| height: auto; | ||
| max-width: 950px; | ||
| margin-top: 12px; | ||
| break-inside: avoid; | ||
| -webkit-backdrop-filter: var(--blur); | ||
| backdrop-filter: var(--blur); | ||
| transition: all .25s ease-in-out !important; | ||
| } | ||
| .podcast-card .podcast-audio-player { | ||
| width: 100%; | ||
| margin: 20px 0; | ||
| } | ||
|
|
||
| .podcast-card .podcast-image-header { | ||
| width: 100%; | ||
| max-height: 300px; | ||
| width: 100%; | ||
| overflow: hidden; | ||
| border-radius: 24px; | ||
| align-content: center; | ||
| } | ||
|
|
||
| .podcast-card .podcast-image-header, .podcast-image-header img { | ||
| min-height: 150px; | ||
| border-radius: 4px; | ||
| overflow: hidden; | ||
| position: relative; | ||
|
|
||
|
|
||
|
|
||
|
|
||
| } | ||
|
|
||
| .podcast-card .background-image { | ||
| width: 100%; | ||
| height: fit-content; | ||
| min-height: 150px; | ||
| object-fit: cover; | ||
| border-radius: 24px; | ||
| transition: all .25s ease-in-out; | ||
| filter: blur(35px) brightness(.7); | ||
| opacity: .5; | ||
| position: absolute; | ||
| top:0; | ||
| left:0; | ||
| } | ||
|
|
||
| .podcast-card .podcast-image-header .icon-container, .podcast-card .podcast-image-header .icon-container img { | ||
| width: 96px !important; | ||
| height: 96px !important; | ||
| min-height: 32px !important; | ||
| margin:auto; | ||
| border-radius: 4px; | ||
| object-fit: cover; | ||
|
|
||
| } |
Oops, something went wrong.