diff --git a/README.md b/README.md index 7cc6620..705faaa 100644 --- a/README.md +++ b/README.md @@ -45,3 +45,11 @@ pnpm build - Browse the maintainer issue inventory in [docs/open-source/issue-backlog.md](./docs/open-source/issue-backlog.md). - Use the issue templates in [`.github/ISSUE_TEMPLATE`](./.github/ISSUE_TEMPLATE). - Review [SECURITY.md](./SECURITY.md) before reporting vulnerabilities. + +### Quick Buy Shortcut + +On desktop, creator cards display a keyboard shortcut hint. + +Press `K` while focused on a creator card to open the Quick Buy flow. + +Mobile behavior remains unchanged. \ No newline at end of file diff --git a/src/components/common/CreatorCard.tsx b/src/components/common/CreatorCard.tsx index cc9edae..824447b 100644 --- a/src/components/common/CreatorCard.tsx +++ b/src/components/common/CreatorCard.tsx @@ -54,6 +54,7 @@ import CreatorDropCountdown from '@/components/common/CreatorDropCountdown'; import CreatorHandleHoverCard from '@/components/common/CreatorHandleHoverCard'; import { CREATOR_CARD_MEDIA_RADIUS_CLASS } from '@/utils/creatorCardTokens'; + interface CreatorCardProps { creator: Course; className?: string; @@ -507,6 +508,16 @@ const CreatorCard: React.FC = ({ ? 'Retry Purchase' : 'Buy Key'} +
+ + + + ⌘K + +
{ + useEffect(() => { + const handleKeyDown = (e: KeyboardEvent) => { + if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') { + // Find the hovered or focused creator card + const hoveredCard = document.querySelector('.creator-card:hover'); + if (hoveredCard) { + const buyButton = hoveredCard.querySelector('button') as HTMLButtonElement; + buyButton?.click(); + e.preventDefault(); + } + } + }; + + window.addEventListener('keydown', handleKeyDown); + return () => window.removeEventListener('keydown', handleKeyDown); + }, []); +}; \ No newline at end of file diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx index 5c83b95..8d8ecb6 100644 --- a/src/pages/LandingPage.tsx +++ b/src/pages/LandingPage.tsx @@ -65,6 +65,7 @@ const FEATURED_CREATOR_FACTS = [ const FEATURED_CREATOR_FOLLOWER_COUNT: number | null = null; const FEATURED_CREATOR_KEY_HOLDER_COUNT = 0; + const getFeaturedCreatorKeyHolderCopy = (count: number | null) => { if (count == null) { return { @@ -86,6 +87,7 @@ const getFeaturedCreatorKeyHolderCopy = (count: number | null) => { explanation: 'Number of wallets that currently hold at least one key.', }; }; + useQuickBuyShortcut(); // Fallback demo data in case API fails const DEMO_CREATORS: Course[] = [