install lucide-react

apps/next/package.json

@@ -31,6 +31,7 @@
 		"jsonwebtoken": "9.0.2",
 		"just-range": "4.1.1",
 		"lib": "workspace:*",
+		"lucide-react": "0.323.0",
 		"nanostores": "0.9.5",
 		"next": "14.0.4",
 		"react": "18.2.0",

apps/next/src/app/Content.tsx

@@ -3,8 +3,8 @@
 import type { Tables } from '@/lib/database.types'
 import Link from 'next/link'
 import { AccessibleIcon } from '@radix-ui/react-accessible-icon'
-import { FiCommand, FiExternalLink } from 'react-icons/fi'
 import { GrGithub } from 'react-icons/gr'
+import { Command, ArrowUpRightFromSquare } from 'lucide-react'
 import { openCommandMenu } from './CommandMenu'
 
 export function Content({ projects }: { projects: Tables<'project'>[] }) {
@@ -41,11 +41,11 @@ export function Content({ projects }: { projects: Tables<'project'>[] }) {
 							rounded
 						"
 					>
-						<FiCommand /> K
+						<Command size={12} /> K
 					</span>
 				</button>
 			</div>
-			<div className="h-screen p-3 m-0 max-w-md mx-auto">
+			<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 h-screen p-3 m-0 max-w-7xl mx-auto">
 				{projects.map(({ title, href, description, test }, index) => {
 					const external = href.startsWith('http')
 
@@ -54,7 +54,8 @@ export function Content({ projects }: { projects: Tables<'project'>[] }) {
 							key={index}
 							href={href}
 							className="
-              flex flex-col rounded-md p-4 m-3 relative
+              rounded-md p-4 m-3 relative
+							min-h-[100px]
 							bg-white dark:bg-black
               ease-in-out duration-100
 							shadow-sm 
@@ -67,9 +68,8 @@ export function Content({ projects }: { projects: Tables<'project'>[] }) {
 							<span className="flex items-center mb-1">
 								{title}{' '}
 								{external && (
-									<FiExternalLink
-										width={18}
-										height={18}
+									<ArrowUpRightFromSquare
+										size={18}
 										className="absolute right-3"
 									/>
 								)}

apps/next/src/app/jwt-generator/page.tsx

@@ -1,9 +1,9 @@
 'use client'
 
-import Content from '@/components/Content'
-import Section from '@/components/Section'
 import { useState } from 'react'
 import { sign } from 'jsonwebtoken'
+import Content from '@/components/Content'
+import Section from '@/components/Section'
 
 export default function Page() {
 	const [encodedValue, setEncodedValue] = useState('')

apps/next/src/app/layout.tsx

@@ -1,8 +1,8 @@
 import type { PropsWithChildren } from 'react'
 import type { Metadata } from 'next'
 
+// import 'ui/globals.css'
 import './styles.css'
-import 'ui/globals.css'
 
 import { headers } from 'next/headers'
 import Link from 'next/link'

apps/next/src/app/random-string/Content.tsx

@@ -3,7 +3,7 @@
 import type { Ref } from '@/components/RandomString'
 
 import { useRef, useState } from 'react'
-import { FiCheck, FiCopy, FiRefreshCw } from 'react-icons/fi'
+import { RefreshCw, Check, Copy } from 'lucide-react'
 import RandomString from '@/components/RandomString'
 import { copyToClipboard } from 'lib/utils/string'
 
@@ -19,7 +19,7 @@ export default function Content({ initialValue }: { initialValue: string }) {
 					onClick={() => randomStringRef.current?.generateNewValue()}
 					data-test="refresh"
 				>
-					<FiRefreshCw width={16} height={16} />
+					<RefreshCw width={16} height={16} />
 					<span>Refresh</span>
 				</button>
 				<button
@@ -32,9 +32,9 @@ export default function Content({ initialValue }: { initialValue: string }) {
 					data-test="copy"
 				>
 					{copied ? (
-						<FiCheck width={16} height={16} />
+						<Check width={16} height={16} />
 					) : (
-						<FiCopy width={16} height={16} />
+						<Copy width={16} height={16} />
 					)}
 					<span>Copy</span>
 				</button>

apps/next/src/app/state-management/SvelteStoreExample.tsx

@@ -91,8 +91,6 @@ function derived<S, T>(
 		const values: S[] = []
 		const unsubscribers = storesArray.map((store, index) => {
 			return store.subscribe((value) => {
-				console.log('derived.subscribe', value, values)
-
 				values[index] = value
 				set(fn(single ? values[0] : values))
 			})

apps/next/src/app/two-way-auth/enter/TwoWayAuthEnter.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useRef, FormEvent, ChangeEvent } from 'react'
 import { Label } from '@radix-ui/react-label'
-import { FiCheck, FiMoreHorizontal, FiX } from 'react-icons/fi'
+import { Check, X, MoreHorizontal } from 'lucide-react'
 
 enum State {
 	idle,
@@ -28,21 +28,21 @@ function EnteredContent({ state }: { state: State }) {
 			return (
 				<>
 					<span className="sr-only">loading</span>
-					<FiMoreHorizontal />
+					<MoreHorizontal />
 				</>
 			)
 		case State.valid:
 			return (
 				<>
 					<span className="sr-only">valid</span>
-					<FiCheck />
+					<Check size={16} />
 				</>
 			)
 		case State.invalid:
 			return (
 				<>
 					<span className="sr-only">invalid</span>
-					<FiX />
+					<X />
 				</>
 			)
 	}