Skip to content

Add creator card meta row component #55

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Chucks1093 merged 7 commits into from
Mar 27, 2026
Merged

Add creator card meta row component #55

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d0883ce
Merge branch 'accesslayerorg:main' into main
chiscookeke11 Mar 27, 2026
6019480
Add reusable creator card meta row component
chiscookeke11 Mar 27, 2026
8e4d91f
Merge pull request #4 from chiscookeke11/codex/add-creator-card-meta-…
chiscookeke11 Mar 27, 2026
71b1d99
UI updates
chiscookeke11 Mar 27, 2026
830df55
Merge branch 'main' of https://github.com/chiscookeke11/accesslayer-c…
chiscookeke11 Mar 27, 2026
bf35275
Merge branch 'main' into issue-45
chiscookeke11 Mar 27, 2026
1d572c8
fixed conflict
chiscookeke11 Mar 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 38 additions & 0 deletions src/components/common/CardMetaRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import type { ReactNode } from 'react';
import { cn } from '@/lib/utils';

interface CardMetaRowProps {
label: ReactNode;
value: ReactNode;
className?: string;
valueClassName?: string;
truncateValue?: boolean;
valueTitle?: string;
}

const CardMetaRow: React.FC<CardMetaRowProps> = ({
label,
value,
className,
valueClassName,
truncateValue = true,
valueTitle,
}) => {
return (
<div className={cn('flex items-center justify-between gap-3 text-xs', className)}>
<span className="shrink-0 uppercase tracking-wider text-white/40">{label}</span>
<span
title={valueTitle}
className={cn(
'font-medium text-white/75',
truncateValue && 'truncate text-right',
valueClassName
)}
>
{value}
</span>
</div>
);
};

export default CardMetaRow;
49 changes: 23 additions & 26 deletions src/components/common/CreatorCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ import { ShoppingCart, Wallet, Link as LinkIcon } from 'lucide-react';
import toast from 'react-hot-toast';
import showToast from '@/utils/toast.util';
import TransactionRetryNotice from '@/components/common/TransactionRetryNotice';
import CardMetaRow from '@/components/common/CardMetaRow';
import VerifiedBadge from '@/components/common/VerifiedBadge';
import CategoryTag from '@/components/common/CategoryTag';
import CompactEmptyWalletState from '@/components/common/CompactEmptyWalletState';

interface CreatorCardProps {
Expand Down Expand Up @@ -60,7 +60,7 @@ const CreatorCard: React.FC<CreatorCardProps> = ({ creator, className }) => {
return (
<div
className={cn(
'group relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 p-4 transition-all duration-300 md:hover:-translate-y-0.5 md:hover:border-amber-500/25 md:hover:bg-white/[0.08] md:hover:shadow-[0_12px_32px_-20px_rgba(251,191,36,0.5)]',
'group relative overflow-hidden rounded-2xl border cursor-pointer border-white/10 bg-white/5 p-4 transition-all duration-300 md:hover:-translate-y-0.5 md:hover:border-amber-500/25 md:hover:bg-white/[0.08] md:hover:shadow-[0_12px_32px_-20px_rgba(251,191,36,0.5)]',
className
)}
>
Expand All @@ -86,40 +86,37 @@ const CreatorCard: React.FC<CreatorCardProps> = ({ creator, className }) => {
<p className="font-jakarta text-sm text-white/50">
@{creator.instructorId || 'creator'}
</p>
<div className="mt-2">
<CategoryTag label={creator.category} />
<div className="mt-3 space-y-1.5">
<CardMetaRow
label={
<span className="inline-flex items-center gap-1.5">
<LinkIcon className="size-3 text-amber-500/70" />
Handle
</span>
}
value={creator.socialHandle ? `@${creator.socialHandle}` : 'No public handle'}
valueTitle={creator.socialHandle ? `@${creator.socialHandle}` : undefined}
valueClassName={creator.socialHandle ? 'text-white/75' : 'italic text-white/35'}
/>
<CardMetaRow
label="Key Price"
value={`${creator.price} ETH`}
truncateValue={false}
valueClassName="font-grotesque text-base font-black text-amber-400"
/>
</div>
{creator.socialHandle ? (
<div className="mt-2 flex items-center gap-1.5 text-xs text-white/60">
<LinkIcon className="size-3 text-amber-500/70" />
<span className="truncate">@{creator.socialHandle}</span>
</div>
) : (
<div className="mt-2 flex items-center gap-1.5 text-xs text-white/30 italic">
<LinkIcon className="size-3 opacity-50" />
<span>No public handle</span>
</div>
)}
</div>

<div className="flex items-center justify-between gap-4">
<div>
<p className="text-xs uppercase tracking-wider text-white/40">
Key Price
</p>
<p className="font-grotesque text-xl font-black text-amber-400">
{creator.price} ETH
</p>
</div>
<div className="flex items-center justify-end gap-4">
<Button
onClick={handleBuy}
variant={isConnected ? 'default' : 'outline'}
size="sm"
disabled={transactionState === 'submitting'}
className={cn(
'rounded-xl font-bold',
'rounded-xl font-bold cursor-pointer ',
!isConnected &&
'border-white/10 text-white/60 hover:bg-white/5'
'border-white/10 hover:bg-white/5'
)}
>
<ShoppingCart className="mr-2 size-4" />
Expand Down
Loading