desloppify: extract shared Premium features and move component data outside render

- PricingCards.tsx: Extract repeated Premium features array to PREMIUM_FEATURES constant - Footer.tsx: Move footerSections, socialLinks, and CURRENT_YEAR outside component to avoid recreation on every render
2026-05-01 02:41:32 -07:00
2 changed files with 55 additions and 64 deletions
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,50 +1,50 @@
 import Link from 'next/link';
 import Image from 'next/image';

+const footerSections = [
+  {
+    title: 'Product',
+    links: [
+      { label: 'Features', href: '/features' },
+      { label: 'Pricing', href: '/pricing' },
+      { label: 'Documentation', href: '/docs' },
+      { label: 'About', href: '/about' },
+    ],
+  },
+  {
+    title: 'Resources',
+    links: [
+      { label: 'Getting Started', href: '/docs' },
+      { label: 'API Reference', href: '/docs#api' },
+      { label: 'Community', href: '#' },
+    ],
+  },
+  {
+    title: 'Support',
+    links: [
+      { label: 'Contact', href: 'mailto:support@dashcaddy.net' },
+      { label: 'Discord', href: '#' },
+      { label: 'Privacy Policy', href: '#' },
+      { label: 'Terms of Service', href: '#' },
+    ],
+  },
+];
+
+const socialLinks = [
+  {
+    icon: (
+      <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515a.074.074 0 00-.079.037c-.211.375-.444.864-.607 1.25a18.27 18.27 0 00-5.487 0c-.163-.386-.395-.875-.607-1.25a.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.873-1.295 1.226-1.994a.076.076 0 00-.042-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.294.075.075 0 01.078-.01c3.928 1.793 8.18 1.793 12.062 0a.075.075 0 01.079.009c.12.098.246.198.373.295a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.076.076 0 00-.041.107c.359.698.77 1.364 1.225 1.994a.077.077 0 00.084.028 19.839 19.839 0 006.002-3.03.076.076 0 00.032-.057c.534-4.506-.9-8.4-3.821-11.865a.055.055 0 00-.032-.027zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.948-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.948 2.419-2.157 2.419zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.948-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.948 2.419-2.157 2.419z" />
+      </svg>
+    ),
+    label: 'Discord',
+    href: '#',
+  },
+];
+
+const CURRENT_YEAR = new Date().getFullYear();
+
 export default function Footer() {
-  const currentYear = new Date().getFullYear();
-
-  const footerSections = [
-    {
-      title: 'Product',
-      links: [
-        { label: 'Features', href: '/features' },
-        { label: 'Pricing', href: '/pricing' },
-        { label: 'Documentation', href: '/docs' },
-        { label: 'About', href: '/about' },
-      ],
-    },
-    {
-      title: 'Resources',
-      links: [
-        { label: 'Getting Started', href: '/docs' },
-        { label: 'API Reference', href: '/docs#api' },
-        { label: 'Community', href: '#' },
-      ],
-    },
-    {
-      title: 'Support',
-      links: [
-        { label: 'Contact', href: 'mailto:support@dashcaddy.net' },
-        { label: 'Discord', href: '#' },
-        { label: 'Privacy Policy', href: '#' },
-        { label: 'Terms of Service', href: '#' },
-      ],
-    },
-  ];
-
-  const socialLinks = [
-    {
-      icon: (
-        <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
-          <path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515a.074.074 0 00-.079.037c-.211.375-.444.864-.607 1.25a18.27 18.27 0 00-5.487 0c-.163-.386-.395-.875-.607-1.25a.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.873-1.295 1.226-1.994a.076.076 0 00-.042-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.294.075.075 0 01.078-.01c3.928 1.793 8.18 1.793 12.062 0a.075.075 0 01.079.009c.12.098.246.198.373.295a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.076.076 0 00-.041.107c.359.698.77 1.364 1.225 1.994a.077.077 0 00.084.028 19.839 19.839 0 006.002-3.03.076.076 0 00.032-.057c.534-4.506-.9-8.4-3.821-11.865a.055.055 0 00-.032-.027zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.948-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.948 2.419-2.157 2.419zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.948-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.948 2.419-2.157 2.419z" />
-        </svg>
-      ),
-      label: 'Discord',
-      href: '#',
-    },
-  ];
-
  return (
    <footer className="border-t border-surface-700/50 bg-surface-950">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12">
@@ -112,7 +112,7 @@ export default function Footer() {
        <div className="border-t border-surface-700/50 pt-8">
          <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
            <p className="text-sm text-surface-500">
-              &copy; {currentYear} DashCaddy. All rights reserved. A product by
+              &copy; {CURRENT_YEAR} DashCaddy. All rights reserved. A product by
            </p>
            <Image
              src="/images/samiahmed7777-logo.png"
--- a/src/components/PricingCards.tsx
+++ b/src/components/PricingCards.tsx
@@ -14,6 +14,13 @@ type Plan = {
  features: string[];
 };

+// Premium features shared across all paid plans
+const PREMIUM_FEATURES = [
+  'Auto-Login SSO',
+  'Recipes (multi-container stack deployment)',
+  'Docker Swarm orchestration'
+] as const;
+
 export default function PricingCards() {
  const [loadingPlan, setLoadingPlan] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
@@ -40,11 +47,7 @@ export default function PricingCards() {
      price: '$25',
      period: 'per month',
      description: 'Premium feature access for one month.',
-      features: [
-        'Auto-Login SSO',
-        'Recipes (multi-container stack deployment)',
-        'Docker Swarm orchestration'
-      ]
+      features: [...PREMIUM_FEATURES]
    },
    {
      code: 'premium_3m',
@@ -54,11 +57,7 @@ export default function PricingCards() {
      savings: 'Best short-term value',
      description: 'A better value plan for regular use.',
      highlighted: true,
-      features: [
-        'Auto-Login SSO',
-        'Recipes (multi-container stack deployment)',
-        'Docker Swarm orchestration'
-      ]
+      features: [...PREMIUM_FEATURES]
    },
    {
      code: 'premium_6m',
@@ -67,11 +66,7 @@ export default function PricingCards() {
      period: 'every 6 months',
      savings: 'Strong loyalty pricing',
      description: 'The commitment plan with aggressive value.',
-      features: [
-        'Auto-Login SSO',
-        'Recipes (multi-container stack deployment)',
-        'Docker Swarm orchestration'
-      ]
+      features: [...PREMIUM_FEATURES]
    },
    {
      code: 'premium_12m',
@@ -80,11 +75,7 @@ export default function PricingCards() {
      period: 'per year',
      savings: 'Best overall value',
      description: 'The best-value annual Premium plan.',
-      features: [
-        'Auto-Login SSO',
-        'Recipes (multi-container stack deployment)',
-        'Docker Swarm orchestration'
-      ]
+      features: [...PREMIUM_FEATURES]
    }
  ], []);