mirror of
https://github.com/vercel/commerce.git
synced 2025-07-29 05:01:22 +00:00
.github
.vscode
app
components
cart
layout
modules
pages
preview
product
search
ui
card
card.tsx
index.tsx
category-card
link
locale-switcher
logo
preview-banner
product-card
sanity-image
text
accordion.tsx
alert.tsx
dropdown-menu.tsx
sheet.tsx
loading-dots.tsx
price.tsx
prose.tsx
helpers
lib
messages
plugins
public
.env.example
.eslintrc.js
.gitignore
.npmrc
.nvmrc
.prettierignore
README.md
components.json
i18n-config.ts
license.md
middleware.ts
next.config.js
package.json
playwright.config.ts
pnpm-lock.yaml
postcss.config.js
prettier.config.js
sanity.config.ts
tailwind.config.js
tsconfig.json
91 lines
2.8 KiB
TypeScript
91 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import SanityImage from 'components/ui/sanity-image';
|
|
import { cn } from 'lib/utils';
|
|
import Link from 'next-intl/link';
|
|
import { FC } from 'react';
|
|
|
|
interface CardProps {
|
|
className?: string;
|
|
title: string;
|
|
image: object | any;
|
|
link: object | any;
|
|
text?: string;
|
|
imageFormat?: 'square' | 'portrait' | 'landscape';
|
|
}
|
|
|
|
const Card: FC<CardProps> = ({ className, title, image, link, text, imageFormat = 'square' }) => {
|
|
const rootClassName = cn('relative', className);
|
|
|
|
const { linkType } = link;
|
|
|
|
const imageWrapperClasses = cn('w-full h-full overflow-hidden relative', {
|
|
['aspect-square']: imageFormat === 'square',
|
|
['aspect-[3/4]']: imageFormat === 'portrait',
|
|
['aspect-[4/3]']: imageFormat === 'landscape'
|
|
});
|
|
const imageClasses = cn('object-cover w-full h-full');
|
|
|
|
function Card() {
|
|
if (linkType === 'internal') {
|
|
const type = link.internalLink.reference._type;
|
|
|
|
let href = '';
|
|
|
|
if (type === 'product') {
|
|
href = `${link.internalLink.reference.slug.current}`;
|
|
} else if (type === 'category') {
|
|
href = `${link.internalLink.reference.slug.current}`;
|
|
} else {
|
|
href = `${link.internalLink.reference.slug.current}`;
|
|
}
|
|
|
|
return (
|
|
<Link href={href} className={rootClassName} aria-label={title}>
|
|
<div className="flex flex-col">
|
|
{image && (
|
|
<div className={imageWrapperClasses}>
|
|
<SanityImage
|
|
className={imageClasses}
|
|
image={image}
|
|
alt={image.alt || ''}
|
|
size="(max-width: 1024px) 50vw, 20vw"
|
|
/>
|
|
</div>
|
|
)}
|
|
<h3 className="mt-2 text-sm font-medium text-high-contrast underline underline-offset-2 lg:mt-3 lg:text-lg lg:underline-offset-4 2xl:text-xl">
|
|
{title}
|
|
</h3>
|
|
{text && <p className="mt-1 text-sm text-low-contrast lg:mt-2 lg:text-base">{text}</p>}
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<a href={link.externalLink.url} className={rootClassName} aria-label={title}>
|
|
<div className="flex flex-col">
|
|
{image && (
|
|
<div className={imageWrapperClasses}>
|
|
<SanityImage
|
|
className={imageClasses}
|
|
image={image}
|
|
alt={image.alt || ''}
|
|
size="(max-width: 1024px) 50vw, 20vw"
|
|
/>
|
|
</div>
|
|
)}
|
|
<h3 className="mt-2 text-sm font-medium text-high-contrast underline underline-offset-2 lg:mt-3 lg:text-lg lg:underline-offset-4 2xl:text-xl">
|
|
{title}
|
|
</h3>
|
|
{text && <p className="mt-1 text-sm text-low-contrast lg:mt-2 lg:text-base">{text}</p>}
|
|
</div>
|
|
</a>
|
|
);
|
|
}
|
|
|
|
return <Card />;
|
|
};
|
|
|
|
export default Card;
|