fix(dashboard-v2): hide View All link when there's nothing to view
This commit is contained in:
parent
2965c8bbc6
commit
d164e538cd
|
@ -4,6 +4,7 @@ import useSWR from "swr";
|
||||||
import { Table, TableBody, TableCell, TableRow } from "../Table";
|
import { Table, TableBody, TableCell, TableRow } from "../Table";
|
||||||
import { ContainerLoadingIndicator } from "../LoadingIndicator";
|
import { ContainerLoadingIndicator } from "../LoadingIndicator";
|
||||||
|
|
||||||
|
import { ViewAllLink } from "./ViewAllLink";
|
||||||
import useFormattedActivityData from "./useFormattedActivityData";
|
import useFormattedActivityData from "./useFormattedActivityData";
|
||||||
|
|
||||||
export default function ActivityTable({ type }) {
|
export default function ActivityTable({ type }) {
|
||||||
|
@ -22,20 +23,23 @@ export default function ActivityTable({ type }) {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Table style={{ tableLayout: "fixed" }}>
|
<>
|
||||||
<TableBody>
|
<Table style={{ tableLayout: "fixed" }}>
|
||||||
{items.map(({ id, name, type, size, date, skylink }) => (
|
<TableBody>
|
||||||
<TableRow key={id}>
|
{items.map(({ id, name, type, size, date, skylink }) => (
|
||||||
<TableCell>{name}</TableCell>
|
<TableRow key={id}>
|
||||||
<TableCell className="w-[80px]">{type}</TableCell>
|
<TableCell>{name}</TableCell>
|
||||||
<TableCell className="w-[80px]" align="right">
|
<TableCell className="w-[80px]">{type}</TableCell>
|
||||||
{size}
|
<TableCell className="w-[80px]" align="right">
|
||||||
</TableCell>
|
{size}
|
||||||
<TableCell className="w-[180px]">{date}</TableCell>
|
</TableCell>
|
||||||
<TableCell>{skylink}</TableCell>
|
<TableCell className="w-[180px]">{date}</TableCell>
|
||||||
</TableRow>
|
<TableCell>{skylink}</TableCell>
|
||||||
))}
|
</TableRow>
|
||||||
</TableBody>
|
))}
|
||||||
</Table>
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
<ViewAllLink to={`/files?tab=${type}`} />
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,21 +1,10 @@
|
||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import { Link } from "gatsby";
|
|
||||||
|
|
||||||
import { Panel } from "../Panel";
|
import { Panel } from "../Panel";
|
||||||
import { Tab, TabPanel, Tabs } from "../Tabs";
|
import { Tab, TabPanel, Tabs } from "../Tabs";
|
||||||
import { ArrowRightIcon } from "../Icons";
|
|
||||||
|
|
||||||
import ActivityTable from "./ActivityTable";
|
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() {
|
export default function LatestActivity() {
|
||||||
return (
|
return (
|
||||||
<Panel title="Latest activity">
|
<Panel title="Latest activity">
|
||||||
|
@ -24,11 +13,9 @@ export default function LatestActivity() {
|
||||||
<Tab id="downloads" title="Downloads" />
|
<Tab id="downloads" title="Downloads" />
|
||||||
<TabPanel tabId="uploads" className="pt-4">
|
<TabPanel tabId="uploads" className="pt-4">
|
||||||
<ActivityTable type="uploads" />
|
<ActivityTable type="uploads" />
|
||||||
<ViewAllLink to="/files?tab=uploads" />
|
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
<TabPanel tabId="downloads" className="pt-4">
|
<TabPanel tabId="downloads" className="pt-4">
|
||||||
<ActivityTable type="downloads" />
|
<ActivityTable type="downloads" />
|
||||||
<ViewAllLink to="/files?tab=downloads" />
|
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
</Panel>
|
</Panel>
|
||||||
|
|
|
@ -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>
|
||||||
|
);
|
Reference in New Issue