feat(showcase): add links for primitives

Author: mrzachnugent

apps/showcase/app/(tabs)/components/primitives.tsx

@@ -1,11 +1,13 @@
 import { useScrollToTop } from '@react-navigation/native';
 import { FlashList } from '@shopify/flash-list';
+import { Link } from 'expo-router';
 import * as React from 'react';
 import { View } from 'react-native';
 import { Button } from '~/components/ui/button';
 import { Input } from '~/components/ui/input';
 import { Text } from '~/components/ui/text';
 import { PRIMITIVES } from '~/lib/constants';
+import { ExternalLink } from '~/lib/icons/ExternalLink';
 import { cn } from '~/lib/utils';
 
 export default function PrimitivesScreen() {
@@ -33,18 +35,20 @@ export default function PrimitivesScreen() {
         estimatedItemSize={49}
         showsVerticalScrollIndicator={false}
         renderItem={({ item, index }) => (
-          <Button
-            disabled
-            variant='secondary'
-            size='lg'
-            className={cn(
-              'opacity-100 bg-secondary/40 pl-4 pr-1.5 border-x border-t border-foreground/5 rounded-none flex-row justify-center',
-              index === 0 && 'rounded-t-lg',
-              index === data.length - 1 && 'border-b rounded-b-lg'
-            )}
-          >
-            <Text className='text-xl'>{toOptions(item)}</Text>
-          </Button>
+          <Link href={`https://rnprimitives.com/${item}`} asChild>
+            <Button
+              variant='secondary'
+              size='lg'
+              className={cn(
+                'bg-secondary/40 px-4 border-x border-t border-foreground/5 rounded-none flex-row justify-between',
+                index === 0 && 'rounded-t-lg',
+                index === data.length - 1 && 'border-b rounded-b-lg'
+              )}
+            >
+              <Text className='text-xl'>@rn-primitives/{item}</Text>
+              <ExternalLink size={16} className='text-foreground/50' />
+            </Button>
+          </Link>
         )}
         ListFooterComponent={<View className='py-4' />}
       />

apps/showcase/lib/icons/ExternalLink.tsx

@@ -0,0 +1,2 @@
+import { Lib } from '@rnr/reusables';
+export const { ExternalLink } = Lib.Icons;

packages/reusables/src/lib/icons/ExternalLink.tsx

@@ -0,0 +1,4 @@
+import { ExternalLink } from 'lucide-react-native';
+import { iconWithClassName } from './iconWithClassName';
+iconWithClassName(ExternalLink);
+export { ExternalLink };

packages/reusables/src/lib/icons/index.ts

@@ -28,6 +28,7 @@ export { Code } from './Code';
 export { Copy } from './Copy';
 export { Database } from './Database';
 export { Ear } from './Ear';
+export { ExternalLink } from './ExternalLink';
 export { Fan } from './Fan';
 export { GalleryHorizontal } from './GalleryHorizontal';
 export { Github } from './Github';