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

🏗️ Added a horizontal medium variant

Browse Source
This commit is contained in:
Rishi Ghan
2023-12-11 14:14:06 -05:00
parent e1be413ff6
commit 72a308801d
2 changed files with 30 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/client/components/Dashboard/Dashboard.tsx
View File

@@ -88,7 +88,7 @@ export const Dashboard = (): ReactElement => {
<div className="grid grid-cols-5 gap-6">
{recentComics?.data.docs.map((recentComic, idx) => (
<Card
orientation="horizontal-2"
orientation="horizontal-2-medium"
key={idx}
imageUrl={`${LIBRARY_SERVICE_HOST}/${recentComic.rawFileDetails.cover.filePath}`}
title={recentComic.inferredMetadata.issue.name}
@@ -96,7 +96,7 @@ export const Dashboard = (): ReactElement => {
>
<div>
<dt className="sr-only">Address</dt>
<dd className="text-sm my-1">
<dd className="text-sm my-1 flex flex-row gap-1">
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
<span className="pr-1 pt-1">
<i className="icon-[solar--hashtag-outline]"></i>
@@ -105,6 +105,15 @@ export const Dashboard = (): ReactElement => {
{recentComic.inferredMetadata.issue.number}
</span>
</span>
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
<span className="pr-1 pt-1">
<i className="icon-[solar--file-bold-duotone] w-4 h-4"></i>
</span>
<span className="text-md text-slate-500">
{recentComic.rawFileDetails.extension}
</span>
</span>
</dd>
</div>

21
src/client/components/shared/Carda.tsx
View File

@@ -107,19 +107,36 @@ const renderCard = (props: ICardProps): ReactElement => {
case "horizontal-2-small":
return (
<>
<div className="flex flex-row justify-start align-top gap-3 bg-slate-400 h-fit rounded-md">
<div className="flex flex-row justify-start align-top gap-3 bg-slate-200 h-fit rounded-md shadow-md shadow-white-400">
{/* thumbnail */}
<div className="rounded-l-md overflow-hidden">
<img src={props.imageUrl} className="object-cover h-20 w-20" />
</div>
{/* details */}
<div className="w-fit h-fit px-1 py-1">
<div className="w-fit h-fit pl-1 pr-2 py-1">
<p className="text-sm">{props.title}</p>
nothin
</div>
</div>
</>
);
case "horizontal-2-medium":
return (
<>
<div className="flex flex-row items-center align-top gap-3 bg-slate-200 h-fit p-2 rounded-md shadow-md shadow-white-400">
{/* thumbnail */}
<div className="rounded-md overflow-hidden">
<img src={props.imageUrl} />
</div>
{/* details */}
<div className="pl-1 pr-2 py-1">
<p className="text-sm">{props.title}</p>
{props.hasDetails && <>{props.children}</>}
</div>
</div>
</>
);
default:
return <></>;
}