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

🏗️ Building variants for Cards

Browse Source
This commit is contained in:
Rishi Ghan
2023-12-11 10:51:47 -05:00
parent 435056048b
commit e1be413ff6
4 changed files with 70 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -88,11 +88,59 @@ export const Dashboard = (): ReactElement => {
<div className="grid grid-cols-5 gap-6">
{recentComics?.data.docs.map((recentComic, idx) => (
<Card
orientation="vertical-2"
orientation="horizontal-2"
key={idx}
imageUrl={`${LIBRARY_SERVICE_HOST}/${recentComic.rawFileDetails.cover.filePath}`}
title={recentComic.inferredMetadata.issue.name}
/>
hasDetails
>
<div>
<dt className="sr-only">Address</dt>
<dd className="text-sm my-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>
</span>
<span className="text-md text-slate-500">
{recentComic.inferredMetadata.issue.number}
</span>
</span>
</dd>
</div>
<div className="flex flex-row items-center gap-4 my-2">
<div className="sm:inline-flex sm:shrink-0 sm:items-center sm:gap-2">
<i className="h-7 w-7 icon-[solar--code-file-bold-duotone] text-orange-400 dark:text-orange"></i>
{/* <div className="">
<p className="text-gray-500">Parking</p>
<p className="font-medium">2 spaces</p>
</div> */}
</div>
<div className="sm:inline-flex sm:shrink-0 sm:items-center sm:gap-2">
<svg
className="h-4 w-4 text-indigo-700"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"
/>
</svg>
{/* <div className="mt-1.5 sm:mt-0">
<p className="text-slate-500">Bathroom</p>
<p className="font-medium">2 rooms</p>
</div> */}
</div>
</div>
</Card>
))}
</div>
</section>

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

@@ -83,7 +83,7 @@ const renderCard = (props: ICardProps): ReactElement => {
case "vertical-2":
return (
<div className="block rounded-md w-fit h-fit shadow-md shadow-white-800 bg-gray-200 dark:bg-slate-500">
<div className="block rounded-md w-fit h-fit shadow-md shadow-white-400 bg-gray-200 dark:bg-slate-500">
<img
alt="Home"
src={props.imageUrl}
@@ -97,54 +97,29 @@ const renderCard = (props: ICardProps): ReactElement => {
{props.title}
</dd>
</div>
<div>
<dt className="sr-only">Address</dt>
<dd className="text-sm">
<span className="whitespace-nowrap rounded-md bg-purple-100 px-2.5 py-0.5 text-sm text-purple-700">
Live
</span>
</dd>
</div>
</dl>
<div className="flex flex-row items-center gap-4 my-2">
<div className="sm:inline-flex sm:shrink-0 sm:items-center sm:gap-2">
<i className="h-7 w-7 icon-[solar--code-file-bold-duotone] text-orange-500 dark:text-orange"></i>
{/* <div className="">
<p className="text-gray-500">Parking</p>
<p className="font-medium">2 spaces</p>
</div> */}
</div>
<div className="sm:inline-flex sm:shrink-0 sm:items-center sm:gap-2">
<svg
className="h-4 w-4 text-indigo-700"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"
/>
</svg>
{/* <div className="mt-1.5 sm:mt-0">
<p className="text-slate-500">Bathroom</p>
<p className="font-medium">2 rooms</p>
</div> */}
</div>
<div className="sm:inline-flex sm:shrink-0 sm:items-center sm:gap-2"></div>
</div>
{props.hasDetails && <>{props.children}</>}
</div>
</div>
);
case "horizontal-2-small":
return (
<>
<div className="flex flex-row justify-start align-top gap-3 bg-slate-400 h-fit rounded-md">
{/* 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">
<p className="text-sm">{props.title}</p>
nothin
</div>
</div>
</>
);
default:
return <></>;
}