``` The logo prop is implemented with a conditional fallback that preserves the default SVG when no custom logo is provided: ```tsx {logo || ( )} ``` ## Implementing a Custom Logo The `logo` prop accepts any valid React element, making it possible to use image tags, SVG components, or styled text. When provided, your custom element renders in place of the default icon. Here is an example using a custom image component: ```tsx import { AuthLayout, LoginForm } from "@ferdiunal/refine-shadcn-auth"; function MyLogo() { return (

); } function LoginPage() { const handleLogin = (data) => { // your login logic … }; return ( } className="min-h-screen" > ); } ``` You can also use inline JSX elements for simpler cases: ```tsx Acme} title="Acme Dashboard" > {/* authentication form */} ``` ## Adding a Full-Screen Background Image The `backgroundImage` prop expects a string containing a valid image URL. This value is injected directly into the CSS `background-image` property of the left pane's overlay div. You can provide local paths, imported assets, or remote URLs. Example with a local image asset: ```tsx import { AuthLayout } from "@ferdiunal/refine-shadcn-auth"; function LoginPage() { return ( ); } ``` Example using a remote image URL: ```tsx {/* form content */} ``` ## Complete Customization Example Here is a comprehensive implementation combining both the custom logo and background image with full viewport coverage: ```tsx import { AuthLayout, LoginForm } from "@ferdiunal/refine-shadcn-auth"; function AppLogo() { return (

MyPlatform

); } export default function AuthenticationPage() { return ( } title="Welcome Back" subtitle="Sign in to continue to your dashboard" backgroundImage="/images/office-abstract.jpg" className="h-screen w-full bg-gray-50" > console.log(values)} loading={false} /> ); } ``` ## Summary - **AuthLayout** accepts `logo` and `backgroundImage` props defined in [`packages/auth/src/components/auth-layout.tsx`](https://github.com/ferdiunal/refine-shadcn/blob/main/packages/auth/src/components/auth-layout.tsx) and exported from [`packages/auth/src/index.ts`](https://github.com/ferdiunal/refine-shadcn/blob/main/packages/auth/src/index.ts). - The **`logo`** prop replaces the default SVG icon with any React element you provide, supporting images, SVGs, or styled text. - The **`backgroundImage`** prop applies a cover-sized background image to the left pane via an absolutely-positioned `div` with inline styles. - Use the **`className`** prop to control the outer container's height and responsive behavior, such as applying `h-screen` for full viewport coverage. ## Frequently Asked Questions ### Where is the AuthLayout component defined in the refine-shadcn repository? The component is defined in **[`packages/auth/src/components/auth-layout.tsx`](https://github.com/ferdiunal/refine-shadcn/blob/main/packages/auth/src/components/auth-layout.tsx)** and re-exported from **[`packages/auth/src/index.ts`](https://github.com/ferdiunal/refine-shadcn/blob/main/packages/auth/src/index.ts)**. These files contain the `AuthLayoutProps` interface and the rendering logic for the customizable left pane. ### Can I use a remote HTTPS URL for the backgroundImage prop? Yes, the `backgroundImage` prop accepts any valid image URL string. You can use remote URLs from CDNs, Unsplash, or other external sources, as well as local public paths or imported asset strings. ### What happens if I omit the logo prop? If you do not provide the `logo` prop, the component renders a default SVG icon as implemented in the fallback logic: `{logo || ()}`. This ensures the layout remains functional without requiring custom branding. ### Is the AuthLayoutProps interface exported for TypeScript consumers? Yes, the interface is exported from the package, providing full type safety when extending or wrapping the `AuthLayout` component in your TypeScript applications.