fix(dashboard-v2): hide View All link when there's nothing to view

This commit is contained in:
Michał Leszczyk 2022-04-11 13:32:22 +02:00
parent 2965c8bbc6
commit d164e538cd
No known key found for this signature in database
GPG Key ID: FA123CA8BAA2FBF4
3 changed files with 31 additions and 28 deletions

View File

@ -4,6 +4,7 @@ import useSWR from "swr";
import { Table, TableBody, TableCell, TableRow } from "../Table";
import { ContainerLoadingIndicator } from "../LoadingIndicator";
import { ViewAllLink } from "./ViewAllLink";
import useFormattedActivityData from "./useFormattedActivityData";
export default function ActivityTable({ type }) {
@ -22,20 +23,23 @@ export default function ActivityTable({ type }) {
}
return (
<Table style={{ tableLayout: "fixed" }}>
<TableBody>
{items.map(({ id, name, type, size, date, skylink }) => (
<TableRow key={id}>
<TableCell>{name}</TableCell>
<TableCell className="w-[80px]">{type}</TableCell>
<TableCell className="w-[80px]" align="right">
{size}
</TableCell>
<TableCell className="w-[180px]">{date}</TableCell>
<TableCell>{skylink}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
<>
<Table style={{ tableLayout: "fixed" }}>
<TableBody>
{items.map(({ id, name, type, size, date, skylink }) => (
<TableRow key={id}>
<TableCell>{name}</TableCell>
<TableCell className="w-[80px]">{type}</TableCell>
<TableCell className="w-[80px]" align="right">
{size}
</TableCell>
<TableCell className="w-[180px]">{date}</TableCell>
<TableCell>{skylink}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
<ViewAllLink to={`/files?tab=${type}`} />
</>
);
}

View File

@ -1,21 +1,10 @@
import * as React from "react";
import { Link } from "gatsby";
import { Panel } from "../Panel";
import { Tab, TabPanel, Tabs } from "../Tabs";
import { ArrowRightIcon } from "../Icons";
import ActivityTable from "./ActivityTable";
const ViewAllLink = (props) => (
<Link className="inline-flex mt-6 items-center gap-3 ease-in-out hover:brightness-90" {...props}>
<span className="bg-primary rounded-full w-[32px] h-[32px] inline-flex justify-center items-center">
<ArrowRightIcon />
</span>
<span className="font-sans text-xs uppercase text-palette-400">View all</span>
</Link>
);
export default function LatestActivity() {
return (
<Panel title="Latest activity">
@ -24,11 +13,9 @@ export default function LatestActivity() {
<Tab id="downloads" title="Downloads" />
<TabPanel tabId="uploads" className="pt-4">
<ActivityTable type="uploads" />
<ViewAllLink to="/files?tab=uploads" />
</TabPanel>
<TabPanel tabId="downloads" className="pt-4">
<ActivityTable type="downloads" />
<ViewAllLink to="/files?tab=downloads" />
</TabPanel>
</Tabs>
</Panel>

View File

@ -0,0 +1,12 @@
import { Link } from "gatsby";
import { ArrowRightIcon } from "../Icons";
export const ViewAllLink = (props) => (
<Link className="inline-flex mt-6 items-center gap-3 ease-in-out hover:brightness-90" {...props}>
<span className="bg-primary rounded-full w-[32px] h-[32px] inline-flex justify-center items-center">
<ArrowRightIcon />
</span>
<span className="font-sans text-xs uppercase text-palette-400">View all</span>
</Link>
);