diff --git a/components/card/Standard.tsx b/components/card/Standard.tsx index 1eb012c..8ce4460 100644 --- 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 (
@@ -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,14 +38,13 @@ export const CardStandardComponent = ({ src = undefined, ...props }) => {

- {t("Subtitle", { ns: "common" })} + France

- {t("Card Title", { ns: "common" })} + Chamonix Centre-ville

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor. + A photo shot by Guillaume Marques on Unsplash.

@@ -44,15 +52,12 @@ export const CardStandardComponent = ({ src = undefined, ...props }) => { {t(`Card Button`, { ns: "card" })}
- - + -