refactor: Reuse components

Author: MatiasOS

app/(docs)/alignment/page.tsx

@@ -1,5 +1,5 @@
 import type { Metadata } from "next"
-import { PageHeader, InfoCard } from "@/components/docs-components"
+import { PageHeader, InfoCard, LinkCard } from "@/components/docs-components"
 import {
   Shield,
   Code,
@@ -135,30 +135,20 @@ export default function AlignmentPage() {
       </p>
 
       <div className="not-prose grid gap-4 sm:grid-cols-1 lg:grid-cols-2 mb-8">
-        <a
+        <LinkCard
           href="https://openscan.eth.link/#/1/tx/0x5dd574df963a1df1f064791e0f6ff41ec972cdbba12293b7e1ece582052ba855"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="block"
-        >
-          <InfoCard
-            title="Ethereum Foundation Mandate"
-            description="The EF's 1000-year charter for Ethereum — centered on CROPS, self-sovereignty, and the walkaway test. Stored on-chain and viewable via OpenScan."
-            icon={<ExternalLink className="h-5 w-5" />}
-          />
-        </a>
-        <a
+          title="Ethereum Foundation Mandate"
+          description="The EF's 1000-year charter for Ethereum — centered on CROPS, self-sovereignty, and the walkaway test. Stored on-chain and viewable via OpenScan."
+          icon={<ExternalLink className="h-5 w-5 shrink-0 text-accent" />}
+          external
+        />
+        <LinkCard
           href="https://trustlessness.eth.limo/general/2025/11/11/the-trustless-manifesto.html"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="block"
-        >
-          <InfoCard
-            title="The Trustless Manifesto"
-            description="The philosophical foundation for OpenScan's Three Laws of Trustless Design — why trustlessness matters, what it demands, and the pledge we build by."
-            icon={<ExternalLink className="h-5 w-5" />}
-          />
-        </a>
+          title="The Trustless Manifesto"
+          description="The philosophical foundation for OpenScan's Three Laws of Trustless Design — why trustlessness matters, what it demands, and the pledge we build by."
+          icon={<ExternalLink className="h-5 w-5 shrink-0 text-accent" />}
+          external
+        />
       </div>
     </div>
   )

components/docs-components.tsx

@@ -55,19 +55,34 @@ interface LinkCardProps {
   title: string
   description: string
   icon: React.ReactNode
+  external?: boolean
 }
 
-export function LinkCard({ href, title, description, icon }: LinkCardProps) {
+export function LinkCard({ href, title, description, icon, external }: LinkCardProps) {
+  const content = (
+    <div className="rounded-xl border border-border bg-card p-5 transition-colors hover:border-accent/40 h-full">
+      <h3 className="!mt-0 font-semibold text-foreground mb-1.5 flex items-center gap-2">
+        {icon}
+        {title}
+        {!external && (
+          <ArrowRight className="h-3.5 w-3.5 opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 transition-all" />
+        )}
+      </h3>
+      <p className="text-sm leading-relaxed text-muted-foreground">{description}</p>
+    </div>
+  )
+
+  if (external) {
+    return (
+      <a href={href} target="_blank" rel="noopener noreferrer" className="group !no-underline hover:!no-underline">
+        {content}
+      </a>
+    )
+  }
+
   return (
     <Link href={href} className="group !no-underline hover:!no-underline">
-      <div className="rounded-xl border border-border bg-card p-5 transition-colors hover:border-accent/40 h-full">
-        <h3 className="!mt-0 font-semibold text-foreground mb-1.5 flex items-center gap-2">
-          {icon}
-          {title}
-          <ArrowRight className="h-3.5 w-3.5 opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 transition-all" />
-        </h3>
-        <p className="text-sm leading-relaxed text-muted-foreground">{description}</p>
-      </div>
+      {content}
     </Link>
   )
 }