Add title display if availalbe

This commit is contained in:
ajnart
2023-04-05 14:38:38 +09:00
parent 0c99b77843
commit 1930a4c1f6

View File

@@ -110,9 +110,9 @@ function RssTile({ widget }: RssTileProps) {
<Stack h="100%"> <Stack h="100%">
<LoadingOverlay visible={isFetching} /> <LoadingOverlay visible={isFetching} />
<ScrollArea className="scroll-area-w100" w="100%" mt="sm" mb="sm"> <ScrollArea className="scroll-area-w100" w="100%" mt="sm" mb="sm">
{data.map((item, index) => ( {data.map((feed, index) => (
<Stack w="100%" spacing="xs"> <Stack w="100%" spacing="xs">
{item.feed.items.map((item: any, index: number) => ( {feed.feed.items.map((item: any, index: number) => (
<Card <Card
key={index} key={index}
withBorder withBorder
@@ -157,7 +157,9 @@ function RssTile({ widget }: RssTileProps) {
{item.content} {item.content}
</Text> </Text>
{item.pubDate && <TimeDisplay date={formatDate(item.pubDate)} />} {item.pubDate && (
<InfoDisplay title={feed.feed.title} date={formatDate(item.pubDate)} />
)}
</Flex> </Flex>
</Flex> </Flex>
</Card> </Card>
@@ -185,12 +187,17 @@ function RssTile({ widget }: RssTileProps) {
); );
} }
const TimeDisplay = ({ date }: { date: string }) => ( const InfoDisplay = ({ date, title }: { date: string; title: string | undefined }) => (
<Group mt="auto" spacing="xs"> <Group mt="auto" spacing="xs">
<IconClock size={14} /> <IconClock size={14} />
<Text size="xs" color="dimmed"> <Text size="xs" color="dimmed">
{date} {date}
</Text> </Text>
{title && (
<Badge variant="outline" size="xs">
{title}
</Badge>
)}
</Group> </Group>
); );