Merge pull request #4 from ar-io/ps-ExternalIcon

refactor: standardize icon types and add external link indicators
ar-io · Dec 18, 2024 · bec78c6 · bec78c6
2 parents cf6c94a + 46e2856
commit bec78c6
Show file tree

Hide file tree

Showing 37 changed files with 230 additions and 48 deletions.
diff --git a/package.json b/package.json
@@ -41,6 +41,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-highlight-words": "^0.20.0",
+    "rehype-external-links": "^3.0.0",
     "remark": "^15.0.1",
     "remark-gfm": "^4.0.0",
     "remark-mdx": "^3.0.0",

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -1,18 +1,6 @@
 import Link from 'next/link'
 import clsx from 'clsx'
-
-function ArrowIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
-      <path
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="m11.5 6.5 3 3.5m0 0-3 3.5m3-3.5h-9"
-      />
-    </svg>
-  )
-}
+import { ArrowIcon } from '@/components/icons/ArrowIcon'
 
 const variantStyles = {
   primary:

diff --git a/src/components/ExternalLink.tsx b/src/components/ExternalLink.tsx
@@ -0,0 +1,30 @@
+import Link from 'next/link'
+import { SquareArrowOutUpRight } from 'lucide-react'
+import clsx from 'clsx'
+
+function ExternalLink({ 
+  href, 
+  children,
+  className 
+}: { 
+  href: string
+  children: React.ReactNode
+  className?: string
+}) {
+  return (
+    <Link 
+      href={href} 
+      target="_blank" 
+      rel="noopener noreferrer" 
+      className={clsx(
+        "inline-flex items-center gap-1 group",
+        className
+      )}
+    >
+      {children}
+      <SquareArrowOutUpRight className="w-4 h-4 transition-colors group-hover:text-zinc-900 dark:group-hover:text-white" />
+    </Link>
+  )
+}
+
+export default ExternalLink
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -2,6 +2,7 @@ import { forwardRef } from 'react'
 import Link from 'next/link'
 import clsx from 'clsx'
 import { motion, useScroll, useTransform } from 'framer-motion'
+import { SquareArrowOutUpRight } from 'lucide-react'
 
 import { Button } from '@/components/Button'
 import { Logo } from '@/components/Logo'
@@ -22,14 +23,19 @@ function TopLevelNavItem({
   children: React.ReactNode,
   target?: string
 }) {
+  const isExternal = href.startsWith('http')
+
   return (
     <li>
       <Link
         href={href}
         target={target}
-        className="text-sm leading-5 text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white"
+        className="inline-flex items-center gap-1 text-sm leading-5 text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white"
       >
         {children}
+        {isExternal && (
+          <SquareArrowOutUpRight className="h-2.5 w-2.5 transition-colors group-hover:text-zinc-900 dark:group-hover:text-white" />
+        )}
       </Link>
     </li>
   )

diff --git a/src/components/Heading.tsx b/src/components/Heading.tsx
@@ -3,12 +3,13 @@
 import { useEffect, useRef } from 'react'
 import Link from 'next/link'
 import { useInView } from 'framer-motion'
+import { LucideProps } from 'lucide-react'
 
 import { useSectionStore } from '@/components/SectionProvider'
 import { Tag } from '@/components/Tag'
 import { remToPx } from '@/lib/remToPx'
 
-function AnchorIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+function AnchorIcon(props: LucideProps) {
   return (
     <svg
       viewBox="0 0 20 20"

diff --git a/src/components/icons/ArrowIcon.tsx b/src/components/icons/ArrowIcon.tsx
@@ -0,0 +1,14 @@
+import { LucideProps } from 'lucide-react'
+
+export function ArrowIcon(props: LucideProps) {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="m11.5 6.5 3 3.5m0 0-3 3.5m3-3.5h-9"
+      />
+    </svg>
+  )
+} 
diff --git a/src/components/icons/BellIcon.tsx b/src/components/icons/BellIcon.tsx
@@ -1,4 +1,6 @@
-export function BellIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from 'lucide-react'
+
+export function BellIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path

diff --git a/src/components/icons/BoltIcon.tsx b/src/components/icons/BoltIcon.tsx
@@ -1,4 +1,6 @@
-export function BoltIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from 'lucide-react'
+
+export function BoltIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path

diff --git a/src/components/icons/BookIcon.tsx b/src/components/icons/BookIcon.tsx
@@ -1,4 +1,6 @@
-export function BookIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function BookIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path

diff --git a/src/components/icons/CalendarIcon.tsx b/src/components/icons/CalendarIcon.tsx
@@ -1,4 +1,6 @@
-export function CalendarIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function CalendarIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path

diff --git a/src/components/icons/CartIcon.tsx b/src/components/icons/CartIcon.tsx
@@ -1,4 +1,6 @@
-export function CartIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from 'lucide-react'
+
+export function CartIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path

diff --git a/src/components/icons/ChatBubbleIcon.tsx b/src/components/icons/ChatBubbleIcon.tsx
@@ -1,4 +1,6 @@
-export function ChatBubbleIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from 'lucide-react'
+
+export function ChatBubbleIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path

diff --git a/src/components/icons/CheckIcon.tsx b/src/components/icons/CheckIcon.tsx
@@ -1,4 +1,6 @@
-export function CheckIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function CheckIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path

diff --git a/src/components/icons/ChevronRightLeftIcon.tsx b/src/components/icons/ChevronRightLeftIcon.tsx
@@ -1,5 +1,7 @@
+import { LucideProps } from "lucide-react";
+
 export function ChevronRightLeftIcon(
-  props: React.ComponentPropsWithoutRef<'svg'>,
+  props: LucideProps,
 ) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>

diff --git a/src/components/icons/ClipboardIcon.tsx b/src/components/icons/ClipboardIcon.tsx
@@ -1,4 +1,6 @@
-export function ClipboardIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function ClipboardIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path

diff --git a/src/components/icons/CogIcon.tsx b/src/components/icons/CogIcon.tsx
@@ -1,4 +1,6 @@
-export function CogIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function CogIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path

diff --git a/src/components/icons/CopyIcon.tsx b/src/components/icons/CopyIcon.tsx
@@ -1,4 +1,6 @@
-export function CopyIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function CopyIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path

diff --git a/src/components/icons/DocumentIcon.tsx b/src/components/icons/DocumentIcon.tsx
@@ -1,4 +1,6 @@
-export function DocumentIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function DocumentIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path

diff --git a/src/components/icons/EnvelopeIcon.tsx b/src/components/icons/EnvelopeIcon.tsx
@@ -1,4 +1,6 @@
-export function EnvelopeIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function EnvelopeIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path

diff --git a/src/components/icons/FaceSmileIcon.tsx b/src/components/icons/FaceSmileIcon.tsx
@@ -1,4 +1,6 @@
-export function FaceSmileIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function FaceSmileIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path

diff --git a/src/components/icons/FolderIcon.tsx b/src/components/icons/FolderIcon.tsx
@@ -1,4 +1,6 @@
-export function FolderIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function FolderIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path

diff --git a/src/components/icons/LinkIcon.tsx b/src/components/icons/LinkIcon.tsx
@@ -1,4 +1,6 @@
-export function LinkIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from 'lucide-react'
+
+export function LinkIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path

diff --git a/src/components/icons/ListIcon.tsx b/src/components/icons/ListIcon.tsx
@@ -1,4 +1,6 @@
-export function ListIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function ListIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path

diff --git a/src/components/icons/MagnifyingGlassIcon.tsx b/src/components/icons/MagnifyingGlassIcon.tsx
@@ -1,5 +1,7 @@
+import { LucideProps } from "lucide-react";
+
 export function MagnifyingGlassIcon(
-  props: React.ComponentPropsWithoutRef<'svg'>,
+  props: LucideProps,
 ) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>

diff --git a/src/components/icons/MapPinIcon.tsx b/src/components/icons/MapPinIcon.tsx
@@ -1,4 +1,6 @@
-export function MapPinIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function MapPinIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path

diff --git a/src/components/icons/PackageIcon.tsx b/src/components/icons/PackageIcon.tsx
@@ -1,4 +1,6 @@
-export function PackageIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function PackageIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path

diff --git a/src/components/icons/PaperAirplaneIcon.tsx b/src/components/icons/PaperAirplaneIcon.tsx
@@ -1,5 +1,7 @@
+import { LucideProps } from "lucide-react";
+
 export function PaperAirplaneIcon(
-  props: React.ComponentPropsWithoutRef<'svg'>,
+  props: LucideProps,
 ) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>

diff --git a/src/components/icons/PaperClipIcon.tsx b/src/components/icons/PaperClipIcon.tsx
@@ -1,4 +1,6 @@
-export function PaperClipIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function PaperClipIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path

diff --git a/src/components/icons/ShapesIcon.tsx b/src/components/icons/ShapesIcon.tsx
@@ -1,4 +1,6 @@
-export function ShapesIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function ShapesIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path

diff --git a/src/components/icons/ShirtIcon.tsx b/src/components/icons/ShirtIcon.tsx
@@ -1,4 +1,6 @@
-export function ShirtIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function ShirtIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path

diff --git a/src/components/icons/SquaresPlusIcon.tsx b/src/components/icons/SquaresPlusIcon.tsx
@@ -1,4 +1,6 @@
-export function SquaresPlusIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function SquaresPlusIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path

diff --git a/src/components/icons/TagIcon.tsx b/src/components/icons/TagIcon.tsx
@@ -1,4 +1,6 @@
-export function TagIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function TagIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path

diff --git a/src/components/icons/UserIcon.tsx b/src/components/icons/UserIcon.tsx
@@ -1,4 +1,6 @@
-export function UserIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function UserIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path

diff --git a/src/components/icons/UsersIcon.tsx b/src/components/icons/UsersIcon.tsx
@@ -1,4 +1,6 @@
-export function UsersIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { LucideProps } from "lucide-react";
+
+export function UsersIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path

diff --git a/src/components/mdx.tsx b/src/components/mdx.tsx
@@ -1,5 +1,6 @@
 import Link from 'next/link'
 import clsx from 'clsx'
+import { LucideProps } from 'lucide-react'
 
 import { Feedback } from '@/components/Feedback'
 import { Heading } from '@/components/Heading'
@@ -26,7 +27,7 @@ export const h2 = function H2(
   return <Heading level={2} {...props} />
 }
 
-function InfoIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+function InfoIcon(props: LucideProps) {
   return (
     <svg viewBox="0 0 16 16" aria-hidden="true" {...props}>
       <circle cx="8" cy="8" r="8" strokeWidth="0" />