admin管理员组

文章数量:1125987

"use client"
import { ClerkLoaded, SignInButton, UserButton, useUser } from '@clerk/nextjs'
import Link from 'next/link';
import Form from 'next/form';
import React from 'react'
import { PackageIcon, TrolleyIcon } from '@sanity/icons';
import { Button } from './ui/button';

function Header() {
    const {user} =useUser();
  return (
    <header className='flex flex-wrap justify-between items-center px-4 py-2'>
        {/* Top row */}
        <div>
            <Link href='/'
            className='
            text-2xl
            font-bold
            text-blue-500
            hover:opacity-50
            cursor-pointer
            mx-auto sm:mx-0'>Shopr</Link>

            
            <Form action={'/search'}
            className='w-full sm:w-auto sm:flex-1 sm:mx-4 mt-2 sm:mt-0'>
                <input 
                type="text"
                name="query"
                placeholder='Search any product'
                className='
                bg-gray-100
                text-gray-800
                px-4️
                py-2
                rounded
                focus:outline-none
                focus:ring-2
                focus:ring-blue-500
                focus:ring-opacity-50
                border
                w-full
                max-w-4xl'/>
            </Form>

            <div>
                <Link href="/basket" 
                className='
                flex-1 relative flex justify-center sm:justify-start sm:flex-none items-center 
                space-x-2 bg-blue-500 hover:bg-blue-700 text-white font-bold px-4 py-2 rounded'>
                
                <TrolleyIcon className='w-6 h-6'/>
                {/* span item count when global state is implemented */}
                <span>My Basket</span>
                </Link>
                
                <ClerkLoaded>
                    {user && (
                        <Link 
                        href="/orders"
                        className='
                        flex-1 relative flex justify-center sm:justify-start sm:flex-none items-center 
                space-x-2 bg-blue-500 hover:bg-blue-700 text-white font-bold px-4 py-2 rounded'>
                        <PackageIcon className='w-6 h-6'/>
                        <span>My Orders</span>
                        </Link>
                    )}

                    {user ? (
                        <div className='flex items-center space-x-2'>
                            <UserButton/>

                            <div className='hidden sm:block text-xs'>
                                <p className='text-gray-400'>Welcome Back</p>
                                <p className='font-bold'>{user.fullName}!</p>
                            </div>
                        </div>

                    ) :(
                        <SignInButton mode='modal'>
                            <Button>Sign In</Button>
                        </SignInButton>
                    )}
                </ClerkLoaded>
            </div>
        </div>
    </header>
  )
}

export default Header

this is my header.tsx code when I clicked on SignInButton it shows a grey screen and not redirecting to clerk auth

also I used (store) folder to have the root layout.tsx file and page.tsx file and I created a separate layout.tsx file for studio(sanity) folder

when I click on Sign in button it should redirect me to clerk sign in auth

本文标签： nextjsnot redirecting to clerk auth when clicked on ltSigninButton mode39modal39gtStack Overflow

版权声明：本文标题：next.js - not redirecting to clerk auth when clicked on &lt;SigninButton mode=&#39;modal&#39;&gt; - Stack Overfl 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736676376a1947202.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。