setup clerk auth#35
Conversation
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| import * as React from 'react'; | ||
|
|
||
| import { Slot } from '@radix-ui/react-slot'; | ||
| import { cva, type VariantProps } from 'class-variance-authority'; | ||
|
|
||
| import { cn } from '@/lib/utils'; | ||
|
|
||
| const buttonVariants = cva( | ||
| "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", | ||
| { | ||
| variants: { | ||
| variant: { | ||
| default: 'bg-primary text-primary-foreground hover:bg-primary/90', | ||
| destructive: | ||
| 'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60', | ||
| outline: | ||
| 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50', | ||
| secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', | ||
| ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50', | ||
| link: 'text-primary underline-offset-4 hover:underline', | ||
| }, | ||
| size: { | ||
| default: 'h-9 px-4 py-2 has-[>svg]:px-3', | ||
| sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5', | ||
| lg: 'h-10 rounded-md px-6 has-[>svg]:px-4', | ||
| icon: 'size-9', | ||
| 'icon-sm': 'size-8', | ||
| 'icon-lg': 'size-10', | ||
| }, | ||
| }, | ||
| defaultVariants: { | ||
| variant: 'default', | ||
| size: 'default', | ||
| }, | ||
| } | ||
| ); |
There was a problem hiding this comment.
This file exports a React component that is imported by client-side forms such as SigninForm and SignupForm. Because the file does not contain a 'use client' directive, Next.js treats Button as a Server Component, and importing it from a Client Component will cause the build to fail with “You're importing a Server Component into a Client Component.” Add 'use client'; at the top so the button can be bundled on the client.
Useful? React with 👍 / 👎.
| import * as React from 'react'; | ||
|
|
||
| import { cn } from '@/lib/utils'; | ||
|
|
||
| function Card({ className, ...props }: React.ComponentProps<'div'>) { | ||
| return ( | ||
| <div | ||
| data-slot="card" | ||
| className={cn( | ||
| 'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm', | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| function CardHeader({ className, ...props }: React.ComponentProps<'div'>) { | ||
| return ( | ||
| <div | ||
| data-slot="card-header" | ||
| className={cn( | ||
| '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6', | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| function CardTitle({ className, ...props }: React.ComponentProps<'div'>) { | ||
| return ( | ||
| <div | ||
| data-slot="card-title" | ||
| className={cn('leading-none font-semibold', className)} | ||
| {...props} | ||
| /> |
There was a problem hiding this comment.
Similar to Button, the card primitives are referenced by client-side forms (SigninForm, SignupForm, etc.), but this module lacks a 'use client' directive. Next.js will therefore treat these components as Server Components and throw a build error when client components import them. Add 'use client'; to the top of this file to avoid the server/client boundary violation.
Useful? React with 👍 / 👎.
| import * as React from 'react'; | ||
|
|
||
| import { cn } from '@/lib/utils'; | ||
|
|
||
| function Input({ className, type, ...props }: React.ComponentProps<'input'>) { | ||
| return ( | ||
| <input | ||
| type={type} | ||
| data-slot="input" | ||
| className={cn( | ||
| 'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', | ||
| 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]', | ||
| 'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive', | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| export { Input }; |
There was a problem hiding this comment.
The Input component is imported directly into client components but the file is missing a 'use client' pragma, causing Next.js to treat it as a server component and reject the import during compilation. Prefix the file with 'use client'; so that the input can be rendered on the client without triggering the server-component import error.
Useful? React with 👍 / 👎.
2 participants
No description provided.