🏗️ Building variants for Cards

2023-12-11 10:51:47 -05:00
parent 435056048b
commit e1be413ff6
4 changed files with 70 additions and 81 deletions
--- a/package.json
+++ b/package.json
@@ -61,7 +61,6 @@
    "react-router-dom": "^6.9.0",
    "react-select": "^5.8.0",
    "react-select-async-paginate": "^0.7.2",
-    "react-slick": "^0.29.0",
    "react-sliding-pane": "^7.1.0",
    "react-stickynode": "^4.1.0",
    "react-textarea-autosize": "^8.3.4",
--- a/src/client/components/Dashboard/Dashboard.tsx
+++ b/src/client/components/Dashboard/Dashboard.tsx
@@ -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>
--- a/src/client/components/shared/Carda.tsx
+++ b/src/client/components/shared/Carda.tsx
@@ -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 <></>;
  }
--- a/yarn.lock
+++ b/yarn.lock
@@ -4519,7 +4519,7 @@ cjs-module-lexer@^1.0.0:
  resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.3.tgz#6c370ab19f8a3394e318fe682686ec0ac684d107"
  integrity sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==

-classnames@^2.0.0, classnames@^2.2.5:
+classnames@^2.0.0:
  version "2.3.2"
  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
@@ -5318,11 +5318,6 @@ engine.io-parser@~5.2.1:
  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-5.2.1.tgz#9f213c77512ff1a6cc0c7a86108a7ffceb16fcfb"
  integrity sha512-9JktcM3u18nU9N2Lz3bWeBgxVgOKpw7yhRaoxQA3FUDZzzw+9WlA6p4G4u0RixNkg14fH7EfEc/RhpurtiROTQ==

-enquire.js@^2.1.6:
-  version "2.1.6"
-  resolved "https://registry.yarnpkg.com/enquire.js/-/enquire.js-2.1.6.tgz#3e8780c9b8b835084c3f60e166dbc3c2a3c89814"
-  integrity sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==
-
 entities@^1.1.1, entities@~1.1.1:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
@@ -7606,13 +7601,6 @@ json-stable-stringify-without-jsonify@^1.0.1:
  resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
  integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==

-json2mq@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/json2mq/-/json2mq-0.2.0.tgz#b637bd3ba9eabe122c83e9720483aeb10d2c904a"
-  integrity sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==
-  dependencies:
-    string-convert "^0.2.0"
-
 json5@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
@@ -9188,17 +9176,6 @@ react-select@^5.8.0:
    react-transition-group "^4.3.0"
    use-isomorphic-layout-effect "^1.1.2"

-react-slick@^0.29.0:
-  version "0.29.0"
-  resolved "https://registry.yarnpkg.com/react-slick/-/react-slick-0.29.0.tgz#0bed5ea42bf75a23d40c0259b828ed27627b51bb"
-  integrity sha512-TGdOKE+ZkJHHeC4aaoH85m8RnFyWqdqRfAGkhd6dirmATXMZWAxOpTLmw2Ll/jPTQ3eEG7ercFr/sbzdeYCJXA==
-  dependencies:
-    classnames "^2.2.5"
-    enquire.js "^2.1.6"
-    json2mq "^0.2.0"
-    lodash.debounce "^4.0.8"
-    resize-observer-polyfill "^1.5.0"
-
 react-sliding-pane@^7.1.0:
  version "7.3.0"
  resolved "https://registry.yarnpkg.com/react-sliding-pane/-/react-sliding-pane-7.3.0.tgz#a6a03b90db216e7ec6f746c7e649d19ba03ff4e0"
@@ -9454,11 +9431,6 @@ requizzle@^0.2.3:
  dependencies:
    lodash "^4.17.21"

-resize-observer-polyfill@^1.5.0:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
-  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
-
 resolve-cwd@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
@@ -9911,11 +9883,6 @@ stream-shift@^1.0.0:
  resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.1.tgz#d7088281559ab2778424279b0877da3c392d5a3d"
  integrity sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==

-string-convert@^0.2.0:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97"
-  integrity sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==
-
 string-length@^4.0.1:
  version "4.0.2"
  resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a"