Playground
Preview
Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
"use client"
import
Link
from
"next/link"
import
Image
from
"next/image"
import
{
useSession
,
signIn
,
signOut
}
from
"next-auth/react"
import
{
Check
}
from
"lucide-react"
import
{
Badge
}
from
"@/components/ui/badge"
import
{
Button
}
from
"@/components/ui/button"
import
{
Avatar
,
AvatarFallback
,
AvatarImage
}
from
"@/components/ui/avatar"
import
{
Card
,
CardContent
}
from
"@/components/ui/card"
import
{
DropdownMenu
,
DropdownMenuContent
,
DropdownMenuItem
,
DropdownMenuLabel
,
DropdownMenuSeparator
,
DropdownMenuTrigger
,
}
from
"@/components/ui/dropdown-menu"
import
{
ImageType
}
from
"@/types"
interface
Props
{
badge
:
string
title
:
string
description
:
string
features
:
{
title
:
string
;
description
:
string
}
[
]
image
:
ImageType
}
export
default
function
Features
(
{
badge
,
title
,
description
,
features
,
image
}
:
Props
)
{
const
{
data
:
session
,
status
}
=
useSession
(
)
const
isLoading
=
status
===
"loading"
return
(
<
div className
=
"w-full"
>
{
/* Header with auth */
}
<
header className
=
"border-b bg-background/95 backdrop-blur supports-
[backdrop-filter]:bg-background/60"
>
<
div className
=
"container flex h-16 items-center justify-between
py-4"
>
<
div className
=
"flex items-center gap-2"
>
Problems
No issues found
Props Editor
badge
Platform
title
Your Business Platform
description
Everything you need to run and grow your business, all in one place.
features
1
title
Secure Access
description
Sign in to unlock premium features and personalized content.
2
title
Seamless Integration
description
Works perfectly with your existing tools and workflows.
3
title
User Management
description
Easily handle permissions and team collaboration.
Add Item
image
Alternative Text