frishi/threetwo
1
0
Fork 0
Code Issues 9 Pull Requests 6 Actions Packages Projects Releases 2 Wiki Activity

🗂️ Added tab icons and styles

Browse Source
This commit is contained in:
Rishi Ghan
2023-12-21 22:04:06 -05:00
parent 4f49e538a8
commit 432fe58585
2 changed files with 20 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/client/components/ComicDetail/ComicDetail.tsx
View File

@@ -181,7 +181,9 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
{ {
id: 2, id: 2,
name: "ComicInfo.xml", name: "ComicInfo.xml",
icon: <i className="fa-solid fa-code"></i>, icon: (
<i className="h-5 w-5 icon-[solar--code-file-bold-duotone] text-slate-500 dark:text-slate-300" />
),
content: ( content: (
<div className="columns" key={2}> <div className="columns" key={2}>
<div className="column is-three-quarters"> <div className="column is-three-quarters">
@@ -193,7 +195,9 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
}, },
{ {
id: 3, id: 3,
icon: <i className="fa-regular fa-file-archive"></i>, icon: (
<i className="h-5 w-5 icon-[solar--winrar-bold-duotone] text-slate-500 dark:text-slate-300" />
),
name: "Archive Operations", name: "Archive Operations",
content: <></>, content: <></>,
/* /*
@@ -202,7 +206,9 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
}, },
{ {
id: 4, id: 4,
icon: <i className="fa-solid fa-circle-nodes"></i>, icon: (
<i className="h-5 w-5 icon-[solar--folder-path-connect-bold-duotone] text-slate-500 dark:text-slate-300" />
),
name: "DC++ Search", name: "DC++ Search",
content: ( content: (
<AcquisitionPanel <AcquisitionPanel
@@ -217,19 +223,20 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
}, },
{ {
id: 5, id: 5,
icon: <i className="fa-solid fa-droplet"></i>, icon: (
<i className="h-5 w-5 icon-[solar--magnet-bold-duotone] text-slate-500 dark:text-slate-300" />
),
name: "Torrent Search", name: "Torrent Search",
content: <>Torrents</>, content: <>Torrents</>,
shouldShow: true, shouldShow: true,
}, },
{ {
id: 6, id: 6,
icon: null, icon: (
name: !isEmpty(data.data) ? ( <i className="h-5 w-5 icon-[solar--download-bold-duotone] text-slate-500 dark:text-slate-300" />
<span className="download-tab-name">Downloads</span>
) : (
"Downloads"
), ),
name: "Downloads",
content: !isNil(data.data) && !isEmpty(data.data) && ( content: !isNil(data.data) && !isEmpty(data.data) && (
<DownloadsPanel <DownloadsPanel
data={data.data.acquisition.directconnect} data={data.data.acquisition.directconnect}

7
src/client/components/ComicDetail/TabControls.tsx
View File

@@ -13,13 +13,13 @@ export const TabControls = (props): ReactElement => {
return ( return (
<> <>
<div className="hidden sm:block mt-7"> <div className="hidden sm:block mt-7 mb-3 w-fit">
<div className="border-b border-gray-200"> <div className="border-b border-gray-200">
<nav className="-mb-px flex gap-6" aria-label="Tabs"> <nav className="flex gap-6" aria-label="Tabs">
{filteredTabs.map(({ id, name, icon }) => ( {filteredTabs.map(({ id, name, icon }) => (
<a <a
key={id} key={id}
className="inline-flex shrink-0 items-center gap-2 border-b-2 border-transparent px-1 pb-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" className="inline-flex shrink-0 items-center gap-2 border-b border-transparent px-1 py-1 text-md font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
aria-current="page" aria-current="page"
onClick={() => setActive(id)} onClick={() => setActive(id)}
> >
@@ -37,6 +37,7 @@ export const TabControls = (props): ReactElement => {
)} )}
{name} {name}
</a> */} </a> */}
<span className="w-5 h-5">{icon}</span>
{name} {name}
</a> </a>
))} ))}