You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

92 lines
2.1 KiB
TypeScript

'use client'
import { Card, CardHeader, CardBody, CardFooter } from '@nextui-org/card'
import { Link } from '@nextui-org/link'
import { Divider } from '@nextui-org/divider'
import { Image } from '@nextui-org/image'
const handleClick = (url: string) => {
console.log(url)
// open(url, '_blank')
getData()
}
const getData = async () => {
const res = await fetch('/api/bruh')
console.log(res)
}
export default function DashboardPage() {
const data = [
{
name: 'NextUI',
link: 'nextui.org',
description:
'Make beautiful websites regardless of your design experience.',
url: 'https://github.com/nextui-org/nextui',
},
{
name: 'NextUI',
link: 'nextui.org',
description:
'Make beautiful websites regardless of your design experience.',
url: 'https://github.com/nextui-org/nextui',
},
{
name: 'NextUI',
link: 'nextui.org',
description:
'Make beautiful websites regardless of your design experience.',
url: 'https://github.com/nextui-org/nextui',
},
{
name: 'NextUI',
link: 'nextui.org',
description:
'Make beautiful websites regardless of your design experience.',
url: 'https://github.com/nextui-org/nextui',
},
]
return (
<div className='mt-4 flex w-full max-w-4xl flex-row flex-wrap justify-center gap-6'>
{data.map((data, index) => (
<Card
className='max-w-[400px]'
key={index}
isPressable
onPress={() => handleClick(data.url)}>
<CardHeader className='flex gap-3'>
<Image
alt='nextui logo'
height={40}
radius='sm'
src='https://avatars.githubusercontent.com/u/86160567?s=200&v=4'
width={40}
/>
<div className='flex flex-col items-start'>
<p className='text-md'>{data.name}</p>
<p className='text-small text-default-500'>
{data.link}
</p>
</div>
</CardHeader>
<Divider />
<CardBody>
<p>{data.description}</p>
</CardBody>
<Divider />
<CardFooter>
<Link
isExternal
showAnchorIcon
href={data.url}>
{data.url}
</Link>
</CardFooter>
</Card>
))}
</div>
)
}