48 lines
2.1 KiB
TypeScript
48 lines
2.1 KiB
TypeScript
import ChannelYoutubeIcon from "@/assets/icons/channel-youtube.svg?react";
|
|
import ExternalLinkIcon from "@/assets/icons/external-link.svg?react";
|
|
import type { YouTubeAudit } from "@/features/report/types/youtubeAudit";
|
|
import { safeUrl } from "@/utils/safeUrl";
|
|
|
|
export type YouTubeChannelInfoCardProps = {
|
|
data: YouTubeAudit;
|
|
};
|
|
|
|
export function YouTubeChannelInfoCard({ data }: YouTubeChannelInfoCardProps) {
|
|
return (
|
|
<div className="rounded-2xl bg-white border border-neutral-20 shadow-sm p-6 mb-8 animate-fade-in-up animation-delay-100">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="w-10 h-10 rounded-xl bg-[var(--color-status-critical-bg)] flex items-center justify-center text-[var(--color-status-critical-text)] [&_svg]:block">
|
|
<ChannelYoutubeIcon width={20} height={20} aria-hidden />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<p className="title-18 text-navy-900 break-keep">{data.channelName}</p>
|
|
<p className="body-14 text-neutral-60 break-keep">{data.handle}</p>
|
|
</div>
|
|
</div>
|
|
<p className="body-14 text-neutral-70 mb-4 whitespace-pre-line break-keep">{data.channelDescription}</p>
|
|
<div className="flex flex-wrap gap-3 body-14 text-neutral-60">
|
|
<span className="break-keep">개설일: {data.channelCreatedDate}</span>
|
|
<span className="break-keep">평균 영상 길이: {data.avgVideoLength}</span>
|
|
<span className="break-keep">업로드 빈도: {data.uploadFrequency}</span>
|
|
</div>
|
|
|
|
{data.linkedUrls.length > 0 ? (
|
|
<div className="mt-4 flex flex-wrap gap-2">
|
|
{data.linkedUrls.map((link) => (
|
|
<a
|
|
key={link.url}
|
|
href={safeUrl(link.url)}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-1 label-12 text-violet-700 hover:underline break-keep cursor-pointer"
|
|
>
|
|
<ExternalLinkIcon aria-hidden />
|
|
{link.label}
|
|
</a>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|