kbe/dishpix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Wip on dark theme

Browse Source
This commit is contained in:
kbe
2025-08-14 18:24:43 +02:00
parent 8aba6e31c8
commit e53748d7a9
3 changed files with 45 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
components/pricing-card.tsx
View File

@@ -22,48 +22,61 @@ const PricingCard: React.FC<PricingCardProps> = ({
}) => {
const { theme } = useTheme();
// Add ARIA label for screen readers
const cardAriaLabel = `${title} pricing plan - $${price}/${billingPeriod}`;
const cardBg = theme === 'dark' ? 'bg-gray-800' : 'bg-white';
const cardText = theme === 'dark' ? 'text-gray-100' : 'text-gray-900';
const cardBorder = theme === 'dark' ? 'border-gray-700' : 'border-gray-200';
const cardShadow = theme === 'dark' ? 'shadow-lg' : 'shadow-sm';
const cardHover = theme === 'dark' ? 'hover:bg-gray-700' : 'hover:bg-indigo-700';
const cardHover = theme === 'dark' ? 'hover:bg-gray-700' : 'hover:bg-indigo-600';
const cardFocus = theme === 'dark' ? 'focus:ring-indigo-500' : 'focus:ring-indigo-500';
const cardPopular = theme === 'dark' ? 'bg-indigo-700' : 'bg-indigo-600';
const cardFeatureText = theme === 'dark' ? 'text-gray-300' : 'text-gray-700';
const cardFeatureIcon = theme === 'dark' ? 'text-green-400' : 'text-green-500';
const cardHoverShadow = theme === 'dark' ? 'hover:shadow-xl' : 'hover:shadow-2xl';
const cardTransition = 'transition-all duration-300';
return (
<div className={`flex flex-col ${cardBg} border ${cardBorder} rounded-lg ${cardShadow} overflow-hidden transition-all duration-300`}>
<div
className={`flex flex-col ${cardBg} border ${cardBorder} rounded-xl ${cardShadow} overflow-hidden ${cardTransition} ${cardHoverShadow}`}
role="article"
aria-label={cardAriaLabel}
tabIndex={0} // Make the card focusable
>
{isPopular && (
<div className={`${cardPopular} text-white text-sm font-medium px-4 py-1`}>
<div
className={`${cardPopular} text-white text-xs font-semibold px-3 py-1.5 rounded-t-xl`}
>
Popular
</div>
)}
<div className="p-6">
<h3 className={`text-xl font-semibold ${cardText}`}>{title}</h3>
<p className="mt-4 text-sm text-gray-400">
<h3 className={`text-2xl font-bold ${cardText}`}>{title}</h3>
<p className="mt-2 text-sm text-gray-400">
{title === 'Start' && 'The perfect starting place for your web app or personal project.'}
{title === 'Pro' && 'Everything you need to build and scale your app.'}
{title === 'Premium' && 'Critical security, performance, observability, platform SLAs, and support.'}
</p>
<p className="mt-8">
<p className="mt-6">
<span className="text-4xl font-extrabold">{price}</span>
<span className="text-base font-medium text-gray-400">/{billingPeriod}</span>
<span className="text-base font-medium text-gray-400 ml-1">/{billingPeriod}</span>
</p>
<a
href={ctaHref}
className={`mt-8 block w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-center text-white bg-indigo-600 ${cardHover} focus:outline-none focus:ring-2 focus:ring-offset-2 ${cardFocus}`}
className={`mt-6 block w-full py-3 px-4 border border-transparent rounded-md shadow text-center text-white bg-indigo-600 ${cardHover} focus:outline-none focus:ring-2 focus:ring-offset-2 ${cardFocus} ${cardTransition}`}
aria-label={`${ctaText} for ${title} plan`}
>
{ctaText}
</a>
</div>
<div className={`border-t ${cardBorder} p-6`}>
<h4 className={`text-sm font-medium ${cardText}`}>What's included:</h4>
<ul className="mt-4 space-y-4">
<ul className="mt-4 space-y-3">
{features.map((feature, index) => (
<li key={index} className="flex items-start">
<svg
className={`h-5 w-5 ${cardFeatureIcon}`}
className={`h-5 w-5 ${cardFeatureIcon} flex-shrink-0`}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
@@ -84,4 +97,4 @@ const PricingCard: React.FC<PricingCardProps> = ({
);
};
export default PricingCard;
export default React.memo(PricingCard);