olaven
/
nrss
1
0
Fork 0
Code Issues 6 Pull Requests Packages Projects Releases Wiki Activity

style: Add icons 

Signed-off-by: Tim Hårek Andreassen <tim@harek.no>
This commit is contained in:
Tim Hårek Andreassen 2024-04-12 11:56:22 +02:00
parent 3fbe7d8f7d
commit 3c3a847668
No known key found for this signature in database
GPG Key ID: E59C7734F0E10EB5
2 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/SeriesCard.tsx
View File

@ -1,6 +1,7 @@
import CopyButton from "../islands/CopyButton.tsx";
import { SearchResult } from "../lib/nrk/nrk.ts";
import { ButtonLink } from "./Button.tsx";
import IconPodcast from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/brand-apple-podcast.tsx";
export default function SeriesCard(props: { serie: SearchResult; origin: string }) {
const feedUrl = new URL(`/api/feeds/${props.serie.seriesId}`, props.origin);
@ -11,11 +12,11 @@ export default function SeriesCard(props: { serie: SearchResult; origin: string
<h3 className="text-xl font-semibold">{props.serie.title}</h3>
<p className="text-md">{props.serie.description}</p>
<img src={image.uri} width={image.width} alt="" />
<ButtonLink href={`podcast:${feedUrl.toString()}`} className="block">
📻 Åpne i din podkast-app
<ButtonLink href={`podcast:${feedUrl.toString()}`} className="block flex items-center gap-2">
<IconPodcast /> Åpne i din podkast-app
</ButtonLink>
<div className="w-full flex">
<CopyButton copyText={feedUrl.toString()} className="whitespace-nowrap">
<CopyButton copyText={feedUrl.toString()} className="whitespace-nowrap flex items-center gap-2">
Kopier URL
</CopyButton>
<pre className="w-full font-mono bg-black text-white select-all p-2 overflow-x-auto">

15
islands/CopyButton.tsx
View File

@ -2,6 +2,9 @@ import { ComponentChildren, JSX } from "preact";
import { useState } from "preact/hooks";
import { IS_BROWSER } from "$fresh/runtime.ts";
import { Button } from "../components/Button.tsx";
import IconCopy from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/copy.tsx";
// BUG: We have to use the GitHub URL until they resolve the issue: https://github.com/hashrock/tabler-icons-tsx/issues/16
import IconCopyCheck from "https://raw.githubusercontent.com/hashrock/tabler-icons-tsx/df5d89c516984fde5c8ec8a382a1348f9fa1aee6/tsx/copy-check.tsx";
type Props = {
copyText: string;
@ -29,7 +32,17 @@ export default function CopyButton(props: Props) {
disabled={!IS_BROWSER || disabled}
{...buttonProps}
>
{clicked ? "Kopiert!" : children}
{clicked
? (
<>
<IconCopyCheck /> Kopiert!
</>
)
: (
<>
<IconCopy /> {children}
</>
)}
</Button>
);
}