mirror of
https://github.com/vercel/commerce.git
synced 2025-07-23 04:36:49 +00:00
Added styles for usp section and started on reusable section
This commit is contained in:
1
components/modules/reusable-section/index.tsx
Normal file
1
components/modules/reusable-section/index.tsx
Normal file
@@ -0,0 +1 @@
|
||||
export { default } from './reusable-section';
|
20
components/modules/reusable-section/reusable-section.tsx
Normal file
20
components/modules/reusable-section/reusable-section.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
'use client'
|
||||
|
||||
interface ReusableSectionProps {
|
||||
section: any
|
||||
}
|
||||
|
||||
const ReusableSection = ({ section }: ReusableSectionProps) => {
|
||||
console.log(section)
|
||||
|
||||
return (
|
||||
<div className="px-4 lg:px-8 2xl:px-16">
|
||||
<div>
|
||||
Reusable section
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ReusableSection
|
1
components/modules/usp-section/index.ts
Normal file
1
components/modules/usp-section/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { default } from './usp-section';
|
46
components/modules/usp-section/usp-section.tsx
Normal file
46
components/modules/usp-section/usp-section.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
'use client'
|
||||
|
||||
import SanityImage from '../../ui/sanity-image';
|
||||
|
||||
interface USPSectionProps {
|
||||
usps: [] | any
|
||||
}
|
||||
|
||||
const USPSection = ({ usps }: USPSectionProps) => {
|
||||
const desktopGridLayout = usps.length === 4 ? 'lg:grid-cols-4' : 'lg:grid-cols-3';
|
||||
|
||||
return (
|
||||
<div className="px-4 lg:px-8 2xl:px-16">
|
||||
<div
|
||||
className={`w-full grid grid-cols-2 gap-x-4 gap-y-6 lg:gap-8 2xl:gap-x-16 ${desktopGridLayout}`}
|
||||
>
|
||||
{usps.map((usp: any, index: number) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`w-full flex flex-col items-center text-center`}
|
||||
>
|
||||
<div className="w-20 h-20 lg:w-24 lg:h-24">
|
||||
<SanityImage
|
||||
className="object-cover"
|
||||
image={usp?.image}
|
||||
alt={usp.name || 'USP image'}
|
||||
width={96}
|
||||
height={96}
|
||||
sizes="96px"
|
||||
/>
|
||||
</div>
|
||||
<h2 className="text-xl mt-4 lg:mt-8 lg:text-2xl">{usp.title}</h2>
|
||||
{usp.text && (
|
||||
<p className="text-sm mt-2 text-low-contrast max-w-xs lg:text-base lg:mt-4">
|
||||
{usp.text}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default USPSection
|
Reference in New Issue
Block a user