feat(www): add login blocks

apps/www/__registry__/default/block/login-01/page.tsx

@@ -4,12 +4,12 @@ export const description = "A simple login form."
 
 export const iframeHeight = "870px"
 
-export const containerClassName = "w-full h-full"
-
 export default function Page() {
   return (
-    <div className="flex h-screen w-full items-center justify-center px-4">
-      <LoginForm />
+    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
+      <div className="w-full max-w-sm">
+        <LoginForm />
+      </div>
     </div>
   )
 }

apps/www/__registry__/default/block/login-02/page.tsx

@@ -0,0 +1,36 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { LoginForm } from "@/registry/default/block/login-02/components/login-form"
+
+export const description = "A two column login page with a cover image."
+
+export const iframeHeight = "870px"
+
+export default function LoginPage() {
+  return (
+    <div className="grid min-h-svh lg:grid-cols-2">
+      <div className="flex flex-col gap-4 p-6 md:p-10">
+        <div className="flex justify-center gap-2 md:justify-start">
+          <a href="#" className="flex items-center gap-2 font-medium">
+            <div className="flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
+              <GalleryVerticalEnd className="size-4" />
+            </div>
+            Acme Inc.
+          </a>
+        </div>
+        <div className="flex flex-1 items-center justify-center">
+          <div className="w-full max-w-xs">
+            <LoginForm />
+          </div>
+        </div>
+      </div>
+      <div className="relative hidden bg-muted lg:block">
+        <img
+          src="/placeholder.svg"
+          alt="Image"
+          className="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
+        />
+      </div>
+    </div>
+  )
+}

apps/www/__registry__/default/block/login-03/page.tsx

@@ -0,0 +1,23 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { LoginForm } from "@/registry/default/block/login-03/components/login-form"
+
+export const description = "A login page with a muted background color."
+
+export const iframeHeight = "870px"
+
+export default function LoginPage() {
+  return (
+    <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
+      <div className="flex w-full max-w-sm flex-col gap-6">
+        <a href="#" className="flex items-center gap-2 self-center font-medium">
+          <div className="flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
+            <GalleryVerticalEnd className="size-4" />
+          </div>
+          Acme Inc.
+        </a>
+        <LoginForm />
+      </div>
+    </div>
+  )
+}

apps/www/__registry__/default/block/login-04/page.tsx

@@ -0,0 +1,15 @@
+import { LoginForm } from "@/registry/default/block/login-04/components/login-form"
+
+export const description = "A login page with form and image."
+
+export const iframeHeight = "870px"
+
+export default function LoginPage() {
+  return (
+    <div className="flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10">
+      <div className="w-full max-w-sm md:max-w-3xl">
+        <LoginForm />
+      </div>
+    </div>
+  )
+}

apps/www/__registry__/default/block/login-05/page.tsx

@@ -0,0 +1,15 @@
+import { LoginForm } from "@/registry/default/block/login-05/components/login-form"
+
+export const description = "A simple email-only login page."
+
+export const iframeHeight = "870px"
+
+export default function LoginPage() {
+  return (
+    <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10">
+      <div className="w-full max-w-sm">
+        <LoginForm />
+      </div>
+    </div>
+  )
+}

apps/www/__registry__/index.tsx

@@ -4073,6 +4073,86 @@ export const Index: Record<string, any> = {
       subcategory: "Login",
       chunks: []
     },
+    "login-02": {
+      name: "login-02",
+      description: "A two column login page with a cover image.",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/new-york/block/login-02/page.tsx",
+        type: "registry:page",
+        target: "app/login/page.tsx"
+      },{
+        path: "registry/new-york/block/login-02/components/login-form.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      component: React.lazy(() => import("@/registry/new-york/block/login-02/page.tsx")),
+      source: "__registry__/new-york/block/login-02/page.tsx",
+      category: "Authentication",
+      subcategory: "Login",
+      chunks: []
+    },
+    "login-03": {
+      name: "login-03",
+      description: "A login page with a muted background color.",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/new-york/block/login-03/page.tsx",
+        type: "registry:page",
+        target: "app/login/page.tsx"
+      },{
+        path: "registry/new-york/block/login-03/components/login-form.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      component: React.lazy(() => import("@/registry/new-york/block/login-03/page.tsx")),
+      source: "__registry__/new-york/block/login-03/page.tsx",
+      category: "Authentication",
+      subcategory: "Login",
+      chunks: []
+    },
+    "login-04": {
+      name: "login-04",
+      description: "A login page with form and image.",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/new-york/block/login-04/page.tsx",
+        type: "registry:page",
+        target: "app/login/page.tsx"
+      },{
+        path: "registry/new-york/block/login-04/components/login-form.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      component: React.lazy(() => import("@/registry/new-york/block/login-04/page.tsx")),
+      source: "__registry__/new-york/block/login-04/page.tsx",
+      category: "Authentication",
+      subcategory: "Login",
+      chunks: []
+    },
+    "login-05": {
+      name: "login-05",
+      description: "A simple email-only login page.",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/new-york/block/login-05/page.tsx",
+        type: "registry:page",
+        target: "app/login/page.tsx"
+      },{
+        path: "registry/new-york/block/login-05/components/login-form.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      component: React.lazy(() => import("@/registry/new-york/block/login-05/page.tsx")),
+      source: "__registry__/new-york/block/login-05/page.tsx",
+      category: "Authentication",
+      subcategory: "Login",
+      chunks: []
+    },
     "chart-area-axes": {
       name: "chart-area-axes",
       description: "An area chart with axes",
@@ -9566,6 +9646,86 @@ export const Index: Record<string, any> = {
       subcategory: "Login",
       chunks: []
     },
+    "login-02": {
+      name: "login-02",
+      description: "A two column login page with a cover image.",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/default/block/login-02/page.tsx",
+        type: "registry:page",
+        target: "app/login/page.tsx"
+      },{
+        path: "registry/default/block/login-02/components/login-form.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      component: React.lazy(() => import("@/registry/default/block/login-02/page.tsx")),
+      source: "__registry__/default/block/login-02/page.tsx",
+      category: "Authentication",
+      subcategory: "Login",
+      chunks: []
+    },
+    "login-03": {
+      name: "login-03",
+      description: "A login page with a muted background color.",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/default/block/login-03/page.tsx",
+        type: "registry:page",
+        target: "app/login/page.tsx"
+      },{
+        path: "registry/default/block/login-03/components/login-form.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      component: React.lazy(() => import("@/registry/default/block/login-03/page.tsx")),
+      source: "__registry__/default/block/login-03/page.tsx",
+      category: "Authentication",
+      subcategory: "Login",
+      chunks: []
+    },
+    "login-04": {
+      name: "login-04",
+      description: "A login page with form and image.",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/default/block/login-04/page.tsx",
+        type: "registry:page",
+        target: "app/login/page.tsx"
+      },{
+        path: "registry/default/block/login-04/components/login-form.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      component: React.lazy(() => import("@/registry/default/block/login-04/page.tsx")),
+      source: "__registry__/default/block/login-04/page.tsx",
+      category: "Authentication",
+      subcategory: "Login",
+      chunks: []
+    },
+    "login-05": {
+      name: "login-05",
+      description: "A simple email-only login page.",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/default/block/login-05/page.tsx",
+        type: "registry:page",
+        target: "app/login/page.tsx"
+      },{
+        path: "registry/default/block/login-05/components/login-form.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      component: React.lazy(() => import("@/registry/default/block/login-05/page.tsx")),
+      source: "__registry__/default/block/login-05/page.tsx",
+      category: "Authentication",
+      subcategory: "Login",
+      chunks: []
+    },
     "chart-area-axes": {
       name: "chart-area-axes",
       description: "An area chart with axes",

apps/www/__registry__/new-york/block/chart-area-interactive.tsx

@@ -141,15 +141,16 @@ export default function Component() {
 
   const filteredData = chartData.filter((item) => {
     const date = new Date(item.date)
-    const now = new Date()
+    const referenceDate = new Date("2024-06-30")
     let daysToSubtract = 90
     if (timeRange === "30d") {
       daysToSubtract = 30
     } else if (timeRange === "7d") {
       daysToSubtract = 7
     }
-    now.setDate(now.getDate() - daysToSubtract)
-    return date >= now
+    const startDate = new Date(referenceDate)
+    startDate.setDate(startDate.getDate() - daysToSubtract)
+    return date >= startDate
   })
 
   return (

apps/www/__registry__/new-york/block/login-01/page.tsx

@@ -4,12 +4,12 @@ export const description = "A simple login form."
 
 export const iframeHeight = "870px"
 
-export const containerClassName = "w-full h-full"
-
 export default function Page() {
   return (
-    <div className="flex h-screen w-full items-center justify-center px-4">
-      <LoginForm />
+    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
+      <div className="w-full max-w-sm">
+        <LoginForm />
+      </div>
     </div>
   )
 }

apps/www/__registry__/new-york/block/login-02/page.tsx

@@ -0,0 +1,36 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { LoginForm } from "@/registry/new-york/block/login-02/components/login-form"
+
+export const description = "A two column login page with a cover image."
+
+export const iframeHeight = "870px"
+
+export default function LoginPage() {
+  return (
+    <div className="grid min-h-svh lg:grid-cols-2">
+      <div className="flex flex-col gap-4 p-6 md:p-10">
+        <div className="flex justify-center gap-2 md:justify-start">
+          <a href="#" className="flex items-center gap-2 font-medium">
+            <div className="flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
+              <GalleryVerticalEnd className="size-4" />
+            </div>
+            Acme Inc.
+          </a>
+        </div>
+        <div className="flex flex-1 items-center justify-center">
+          <div className="w-full max-w-xs">
+            <LoginForm />
+          </div>
+        </div>
+      </div>
+      <div className="relative hidden bg-muted lg:block">
+        <img
+          src="/placeholder.svg"
+          alt="Image"
+          className="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
+        />
+      </div>
+    </div>
+  )
+}

apps/www/__registry__/new-york/block/login-03/page.tsx

@@ -0,0 +1,23 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { LoginForm } from "@/registry/new-york/block/login-03/components/login-form"
+
+export const description = "A login page with a muted background color."
+
+export const iframeHeight = "870px"
+
+export default function LoginPage() {
+  return (
+    <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
+      <div className="flex w-full max-w-sm flex-col gap-6">
+        <a href="#" className="flex items-center gap-2 self-center font-medium">
+          <div className="flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
+            <GalleryVerticalEnd className="size-4" />
+          </div>
+          Acme Inc.
+        </a>
+        <LoginForm />
+      </div>
+    </div>
+  )
+}

apps/www/__registry__/new-york/block/login-04/page.tsx

@@ -0,0 +1,15 @@
+import { LoginForm } from "@/registry/new-york/block/login-04/components/login-form"
+
+export const description = "A login page with form and image."
+
+export const iframeHeight = "870px"
+
+export default function LoginPage() {
+  return (
+    <div className="flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10">
+      <div className="w-full max-w-sm md:max-w-3xl">
+        <LoginForm />
+      </div>
+    </div>
+  )
+}