diff --git a/src/components/repo/RepoActionControl.tsx b/src/components/repo/RepoActionControl.tsx new file mode 100644 index 0000000..8f3d25e --- /dev/null +++ b/src/components/repo/RepoActionControl.tsx @@ -0,0 +1,49 @@ +import type { ReactNode } from 'react' + +type RepoActionControlProps = { + ariaLabel: string + children: ReactNode + count?: ReactNode + countLabel?: string + href?: string +} + +export function RepoActionControl({ + ariaLabel, + children, + count, + countLabel, + href, +}: RepoActionControlProps) { + const actionClassName = + 'flex size-10 items-center justify-center transition-colors hover:bg-ctp-surface-0' + + return ( +
+ {href === undefined ? ( + + ) : ( + + {children} + + )} + + {count !== undefined && ( + + {count} + + )} +
+ ) +} diff --git a/src/components/repo/RepoAtomFeed.tsx b/src/components/repo/RepoAtomFeed.tsx new file mode 100644 index 0000000..7b8832d --- /dev/null +++ b/src/components/repo/RepoAtomFeed.tsx @@ -0,0 +1,20 @@ +import type { Handle } from '@atcute/lexicons' +import { IconRss } from '@tabler/icons-react' +import { RepoActionControl } from './RepoActionControl' + +type RepoAtomFeedProps = { + handle: Handle + repoKey: string +} + +export function RepoAtomFeed({ handle, repoKey }: RepoAtomFeedProps) { + const atomFeedUrl = `https://tangled.org/${encodeURIComponent(handle)}/${encodeURIComponent(repoKey)}/feed.atom` + + return ( +
+ + +
+ ) +} diff --git a/src/components/repo/RepoStarCount.tsx b/src/components/repo/RepoStarCount.tsx index bed9eb3..ce5d71f 100644 --- a/src/components/repo/RepoStarCount.tsx +++ b/src/components/repo/RepoStarCount.tsx @@ -1,16 +1,28 @@ import type { Did } from '@atcute/lexicons' import { IconStar } from '@tabler/icons-react' import { useRepoStarCount } from '../../hooks/useRepoStarCount' +import { RepoActionControl } from './RepoActionControl' type RepoStarCountProps = { repoDid?: Did + variant?: 'count' | 'action' } -export function RepoStarCount({ repoDid }: RepoStarCountProps) { +export function RepoStarCount({ repoDid, variant = 'count' }: RepoStarCountProps) { const { starCount, hasFailed } = useRepoStarCount(repoDid) if (repoDid === undefined) return null + const count = hasFailed ? '—' : (starCount ?? '…') + + if (variant === 'action') { + return ( + + + ) + } + return ( ) } diff --git a/src/components/repo/RepoView.tsx b/src/components/repo/RepoView.tsx index 3ca379e..b48a178 100644 --- a/src/components/repo/RepoView.tsx +++ b/src/components/repo/RepoView.tsx @@ -3,8 +3,9 @@ import Markdown from 'react-markdown' import rehypeRaw from 'rehype-raw' import rehypeSanitize from 'rehype-sanitize' import type { Repo } from '../../lib/tangled' -import { getRepoName } from '../../lib/tangled/repo' +import { getRepoName, getRepoRkey } from '../../lib/tangled/repo' import { SurfaceCard } from '../shared/SurfaceCard' +import { RepoAtomFeed } from './RepoAtomFeed' import { RepoCloneUrl } from './RepoCloneUrl' import { RepoStarCount } from './RepoStarCount' @@ -16,6 +17,7 @@ type RepoProps = { export function RepoView({ handle, repo }: RepoProps) { const { value } = repo const name = getRepoName(repo) + const repoKey = getRepoRkey(repo) const repoDid = value.repoDid return ( @@ -29,7 +31,10 @@ export function RepoView({ handle, repo }: RepoProps) { {value.knot &&

{value.knot}

} - +
+ + +
{value.description && (