frontend-shopify/react-editor-shopify
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update default styles and components

Browse Source
This commit is contained in:
Rami Bitar
2026-05-10 15:49:28 -04:00
parent 383a593c42
commit 0a1fbd62bb
13 changed files with 144 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/commerce/collection-card.tsx
View File

@@ -24,7 +24,7 @@ const CollectionCard: React.FC<CollectionCardProps> = ({ collection }) => {
<Link to={`/collections/${collection.handle}`} className="block group">
<Card className="hover:shadow-xl transition-shadow duration-300 overflow-hidden py-0 gap-0">
{/* Collection Image */}
<div className="aspect-video overflow-hidden bg-gray-100">
<div className="aspect-video overflow-hidden bg-muted">
{collection.image ? (
<img
src={collection.image.url}
@@ -32,7 +32,7 @@ const CollectionCard: React.FC<CollectionCardProps> = ({ collection }) => {
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
/>
) : (
<div className="w-full h-full flex items-center justify-center text-gray-400">
<div className="w-full h-full flex items-center justify-center text-muted-foreground">
<i className="ri-folder-line text-6xl"></i>
</div>
)}
@@ -40,18 +40,18 @@ const CollectionCard: React.FC<CollectionCardProps> = ({ collection }) => {
{/* Collection Info */}
<CardContent className="p-6">
<h3 className="text-2xl font-bold text-gray-900 mb-3 group-hover:text-gray-600 transition-colors font-heading">
<h3 className="text-2xl font-bold text-foreground mb-3 group-hover:text-muted-foreground transition-colors font-heading">
{collection.title}
</h3>
{collection.description && (
<p className="text-gray-600">
<p className="text-muted-foreground">
{collection.description.substring(0, 100)}
{collection.description.length > 100 ? '...' : ''}
</p>
)}
<div className="mt-4 text-black font-semibold group-hover:text-gray-600 transition-colors flex items-center">
<div className="mt-4 text-foreground font-semibold group-hover:text-muted-foreground transition-colors flex items-center">
<span>View Collection</span>
<i className="ri-arrow-right-s-line ml-2"></i>
</div>