fix(card): updated card example

fluid-design-io · Aug 25, 2022 · 112c100 · 112c100
1 parent 77f75f9
commit 112c100
Showing 1 changed file with 19 additions and 14 deletions.
diff --git a/components/card/Standard.tsx b/components/card/Standard.tsx
@@ -2,15 +2,24 @@ import Image from "next/image";
 import { useTranslation } from "next-i18next";
 import { HeartIcon, ShareIcon } from "@heroicons/react/outline";
 import { Button } from "@fluid-design/fluid-ui";
+import { twMerge } from "tailwind-merge";
+import clsx, { ClassValue } from "clsx";
+
+/** Merge classes with tailwind-merge with clsx full feature */
+function clsxm(...classes: ClassValue[]) {
+  return twMerge(clsx(...classes));
+}
 
 export const CardStandardComponent = ({ src = undefined, ...props }) => {
   const { t } = useTranslation("image");
   const contrastRing = `contrast-more:border contrast-more:border-primary-800 dark:contrast-more:border-primary-200`;
   return (
     <div
-      className={`component card-bg w-full max-w-xs translate-x-0 transform overflow-hidden rounded-xl bg-primary-50 shadow dark:bg-primary-900 dark:contrast-more:bg-black ${contrastRing} ${
+      className={clsxm(
+        `component card-bg flex w-full max-w-xs translate-x-0 transform flex-col overflow-hidden rounded-xl bg-primary-50 shadow  dark:bg-primary-900 dark:contrast-more:bg-black`,
+        contrastRing,
         props.className ? props.className : `aspect-[1/1.15]`
-      } flex flex-col`}
+      )}
     >
       <div className="h-full">
         <div className="pointer-events-none relative h-full w-full select-none overflow-hidden">
@@ -19,7 +28,7 @@ export const CardStandardComponent = ({ src = undefined, ...props }) => {
             src={
               src
                 ? src
-                : `https://images.unsplash.com/photo-1613125700782-8394bec3e89d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80`
+                : `https://images.unsplash.com/photo-1612993239130-c5e816a63d8d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1587&q=80`
             }
             objectFit="cover"
             layout="fill"
@@ -29,30 +38,26 @@ export const CardStandardComponent = ({ src = undefined, ...props }) => {
       <div className="flex h-full flex-grow flex-col px-4 pt-4 pb-2">
         <div className="flex-grow">
           <h2 className="text-xs text-primary-500 contrast-more:font-bold contrast-more:text-primary-700 dark:text-primary-500 dark:contrast-more:text-primary-300">
-            {t("Subtitle", { ns: "common" })}
+            France
           </h2>
           <h1 className="font-semibold contrast-more:font-bold dark:text-primary-100">
-            {t("Card Title", { ns: "common" })}
+            Chamonix Centre-ville
           </h1>
           <p className="pt-1.5 pb-2 text-sm leading-tight text-primary-600 contrast-more:font-medium contrast-more:text-primary-900 dark:text-primary-300 dark:contrast-more:text-primary-100">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor.
+            A photo shot by Guillaume Marques on Unsplash.
           </p>
         </div>
         <div className="flex items-center justify-between pt-1">
           <Button size="xs" weight="light" color="blue">
             {t(`Card Button`, { ns: "card" })}
           </Button>
           <div className="-mr-2 flex">
-            <button className="rounded-full p-2 hover:bg-primary-200/50 focus:bg-primary-200/50 contrast-more:ml-2 contrast-more:ring-1 contrast-more:ring-primary-800 dark:hover:bg-primary-600 dark:focus:bg-primary-600 dark:contrast-more:ring-primary-200">
+            <Button weight="clear" color="sky" shape="pill" iconOnly>
               <span className="sr-only">Share this post</span>
-              <ShareIcon className="h-5 w-5 text-primary-400 contrast-more:text-primary-700 dark:contrast-more:text-primary-200" />
-            </button>
-            <button className="rounded-full p-2 hover:bg-primary-200/50 focus:bg-primary-200/50 contrast-more:ml-2 contrast-more:ring-1 contrast-more:ring-primary-800 dark:hover:bg-primary-600 dark:focus:bg-primary-600 dark:contrast-more:ring-primary-200">
+              <ShareIcon className="h-5 w-5" />
+            </Button>
+            <Button weight="clear" color="rose" shape="pill" iconOnly>
               <span className="sr-only">Fav this post</span>
-              <HeartIcon className="h-5 w-5 text-primary-400 contrast-more:text-primary-700 dark:contrast-more:text-primary-200" />
-            </button>
-            <Button weight="clear" color="blue" shape="pill" iconOnly>
               <HeartIcon className="h-5 w-5" />
             </Button>
           </div>