create-pxlr 1.0.0

package/templates/blog/pxlr-cms/packages/admin/src/components/schema-code-generator.tsx

@@ -0,0 +1,326 @@
+'use client';
+
+import { useState } from 'react';
+import { Check, Copy, Code } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useI18n } from '@/lib/i18n/context';
+
+interface SchemaField {
+  name: string;
+  type: string;
+  title?: string;
+  required?: boolean;
+}
+
+interface SchemaCodeGeneratorProps {
+  schemaName: string;
+  schemaTitle: string;
+  fields: SchemaField[];
+  isSingleton?: boolean;
+}
+
+export function SchemaCodeGenerator({ 
+  schemaName, 
+  schemaTitle, 
+  fields,
+  isSingleton 
+}: SchemaCodeGeneratorProps) {
+  const { locale } = useI18n();
+  const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
+
+  const copyToClipboard = (text: string, index: number) => {
+    navigator.clipboard.writeText(text);
+    setCopiedIndex(index);
+    setTimeout(() => setCopiedIndex(null), 2000);
+  };
+
+  // Generate TypeScript interface
+  const generateTypeInterface = () => {
+    const typeMap: Record<string, string> = {
+      string: 'string',
+      text: 'string',
+      number: 'number',
+      boolean: 'boolean',
+      date: 'string',
+      datetime: 'string',
+      richText: 'any', // or specific rich text type
+      image: '{ url: string; alt?: string }',
+      file: '{ url: string; filename: string }',
+      slug: 'string',
+      url: 'string',
+      email: 'string',
+      reference: '{ _ref: string }',
+      array: 'any[]',
+      object: 'Record<string, any>',
+    };
+
+    const interfaceFields = fields.map(field => {
+      const tsType = typeMap[field.type] || 'any';
+      const optional = field.required ? '' : '?';
+      return `  ${field.name}${optional}: ${tsType};`;
+    }).join('\n');
+
+    const pascalName = schemaName.charAt(0).toUpperCase() + schemaName.slice(1);
+
+    return `// app/types/${schemaName}.ts
+export interface ${pascalName} {
+  id: string;
+  schema_name: string;
+${interfaceFields}
+  created_at: string;
+  updated_at: string;
+}`;
+  };
+
+  // Generate API client function
+  const generateApiClient = () => {
+    const pascalName = schemaName.charAt(0).toUpperCase() + schemaName.slice(1);
+    
+    if (isSingleton) {
+      return `// app/lib/cms.ts
+const API_URL = process.env.NEXT_PUBLIC_CMS_API_URL || 'http://localhost:4000';
+
+export async function get${pascalName}(): Promise<${pascalName} | null> {
+  try {
+    const res = await fetch(\`\${API_URL}/content?schema=${schemaName}&limit=1\`, {
+      next: { revalidate: 60 } // ISR: revalidate every 60 seconds
+    });
+    const data = await res.json();
+    return data.documents?.[0] || null;
+  } catch (error) {
+    console.error('Failed to fetch ${schemaName}:', error);
+    return null;
+  }
+}`;
+    }
+
+    return `// app/lib/cms.ts
+const API_URL = process.env.NEXT_PUBLIC_CMS_API_URL || 'http://localhost:4000';
+
+// Получить все документы типа ${schemaTitle}
+export async function getAll${pascalName}s(): Promise<${pascalName}[]> {
+  try {
+    const res = await fetch(\`\${API_URL}/content?schema=${schemaName}\`, {
+      next: { revalidate: 60 }
+    });
+    const data = await res.json();
+    return data.documents || [];
+  } catch (error) {
+    console.error('Failed to fetch ${schemaName}s:', error);
+    return [];
+  }
+}
+
+// Получить один документ по ID
+export async function get${pascalName}ById(id: string): Promise<${pascalName} | null> {
+  try {
+    const res = await fetch(\`\${API_URL}/content/\${id}\`, {
+      next: { revalidate: 60 }
+    });
+    const data = await res.json();
+    return data.document || null;
+  } catch (error) {
+    console.error('Failed to fetch ${schemaName}:', error);
+    return null;
+  }
+}
+
+// Получить документ по slug (если есть поле slug)
+export async function get${pascalName}BySlug(slug: string): Promise<${pascalName} | null> {
+  try {
+    const res = await fetch(\`\${API_URL}/content?schema=${schemaName}&slug=\${slug}\`, {
+      next: { revalidate: 60 }
+    });
+    const data = await res.json();
+    return data.documents?.[0] || null;
+  } catch (error) {
+    console.error('Failed to fetch ${schemaName}:', error);
+    return null;
+  }
+}`;
+  };
+
+  // Generate page component
+  const generatePageComponent = () => {
+    const pascalName = schemaName.charAt(0).toUpperCase() + schemaName.slice(1);
+    
+    if (isSingleton) {
+      return `// app/${schemaName}/page.tsx
+import { get${pascalName} } from '@/lib/cms';
+
+export default async function ${pascalName}Page() {
+  const data = await get${pascalName}();
+
+  if (!data) {
+    return <div>Контент не найден</div>;
+  }
+
+  return (
+    <div className="container mx-auto py-8">
+      <h1 className="text-3xl font-bold">{data.title}</h1>
+      {/* Добавьте отображение других полей */}
+    </div>
+  );
+}`;
+    }
+
+    return `// app/${schemaName}/page.tsx — Список всех записей
+import Link from 'next/link';
+import { getAll${pascalName}s } from '@/lib/cms';
+
+export default async function ${pascalName}ListPage() {
+  const items = await getAll${pascalName}s();
+
+  return (
+    <div className="container mx-auto py-8">
+      <h1 className="text-3xl font-bold mb-6">${schemaTitle}</h1>
+      <div className="grid gap-4">
+        {items.map((item) => (
+          <Link 
+            key={item.id} 
+            href={\`/${schemaName}/\${item.data?.slug || item.id}\`}
+            className="block p-4 border rounded-lg hover:bg-gray-50"
+          >
+            <h2 className="text-xl font-semibold">{item.data?.title}</h2>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// app/${schemaName}/[slug]/page.tsx — Отдельная страница
+import { get${pascalName}BySlug, getAll${pascalName}s } from '@/lib/cms';
+import { notFound } from 'next/navigation';
+
+interface Props {
+  params: Promise<{ slug: string }>;
+}
+
+// Генерация статических путей (SSG)
+export async function generateStaticParams() {
+  const items = await getAll${pascalName}s();
+  return items.map((item) => ({
+    slug: item.data?.slug || item.id,
+  }));
+}
+
+export default async function ${pascalName}Page({ params }: Props) {
+  const { slug } = await params;
+  const data = await get${pascalName}BySlug(slug);
+
+  if (!data) {
+    notFound();
+  }
+
+  return (
+    <div className="container mx-auto py-8">
+      <h1 className="text-3xl font-bold">{data.data?.title}</h1>
+      {/* Отобразите контент */}
+    </div>
+  );
+}`;
+  };
+
+  // Generate .env example
+  const generateEnvExample = () => {
+    return `# .env.local
+NEXT_PUBLIC_CMS_API_URL=http://localhost:4000`;
+  };
+
+  const codeBlocks = [
+    {
+      title: locale === 'ru' ? '1. Переменные окружения' : '1. Environment Variables',
+      description: locale === 'ru' 
+        ? 'Добавьте в .env.local URL вашего CMS API'
+        : 'Add CMS API URL to .env.local',
+      code: generateEnvExample(),
+      language: 'bash',
+    },
+    {
+      title: locale === 'ru' ? '2. TypeScript типы' : '2. TypeScript Types',
+      description: locale === 'ru'
+        ? 'Создайте файл с типами для типизации'
+        : 'Create types file for type safety',
+      code: generateTypeInterface(),
+      language: 'typescript',
+    },
+    {
+      title: locale === 'ru' ? '3. API клиент' : '3. API Client',
+      description: locale === 'ru'
+        ? 'Функции для получения данных из CMS'
+        : 'Functions to fetch data from CMS',
+      code: generateApiClient(),
+      language: 'typescript',
+    },
+    {
+      title: locale === 'ru' ? '4. Компонент страницы' : '4. Page Component',
+      description: locale === 'ru'
+        ? 'Пример использования в Next.js App Router'
+        : 'Example usage in Next.js App Router',
+      code: generatePageComponent(),
+      language: 'typescript',
+    },
+  ];
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-2">
+        <Code className="h-5 w-5" />
+        <h2 className="text-lg font-semibold">
+          {locale === 'ru' ? 'Использование в Next.js' : 'Usage in Next.js'}
+        </h2>
+      </div>
+      
+      <p className="text-sm text-muted-foreground">
+        {locale === 'ru' 
+          ? 'Скопируйте код ниже для использования этой схемы в вашем Next.js приложении (папка app/)'
+          : 'Copy the code below to use this schema in your Next.js application (app/ folder)'}
+      </p>
+
+      <div className="space-y-4">
+        {codeBlocks.map((block, index) => (
+          <div key={index} className="rounded-lg border bg-muted/30">
+            <div className="flex items-center justify-between p-4 border-b">
+              <div>
+                <h3 className="font-medium">{block.title}</h3>
+                <p className="text-xs text-muted-foreground">{block.description}</p>
+              </div>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => copyToClipboard(block.code, index)}
+              >
+                {copiedIndex === index ? (
+                  <>
+                    <Check className="mr-2 h-4 w-4" />
+                    {locale === 'ru' ? 'Скопировано' : 'Copied'}
+                  </>
+                ) : (
+                  <>
+                    <Copy className="mr-2 h-4 w-4" />
+                    {locale === 'ru' ? 'Копировать' : 'Copy'}
+                  </>
+                )}
+              </Button>
+            </div>
+            <pre className="p-4 overflow-x-auto text-sm">
+              <code>{block.code}</code>
+            </pre>
+          </div>
+        ))}
+      </div>
+
+      <div className="rounded-lg bg-blue-50 dark:bg-blue-950 p-4 text-sm">
+        <p className="font-medium text-blue-900 dark:text-blue-100">
+          {locale === 'ru' ? '💡 Совет' : '💡 Tip'}
+        </p>
+        <p className="mt-1 text-blue-800 dark:text-blue-200">
+          {locale === 'ru' 
+            ? 'Используйте revalidate для ISR (Incremental Static Regeneration) — страницы будут обновляться автоматически каждые 60 секунд.'
+            : 'Use revalidate for ISR (Incremental Static Regeneration) — pages will update automatically every 60 seconds.'}
+        </p>
+      </div>
+    </div>
+  );
+}

package/templates/blog/pxlr-cms/packages/admin/src/components/ui/avatar.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { cn } from '@/lib/utils';
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
+      className
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn('aspect-square h-full w-full', className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      'flex h-full w-full items-center justify-center rounded-full bg-muted',
+      className
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };

package/templates/blog/pxlr-cms/packages/admin/src/components/ui/button.tsx

@@ -0,0 +1,55 @@
+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 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

package/templates/blog/pxlr-cms/packages/admin/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,194 @@
+'use client';
+
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { Check, ChevronRight, Circle } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      'px-2 py-1.5 text-sm font-semibold',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};

package/templates/blog/pxlr-cms/packages/admin/src/components/ui/input.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = 'Input';
+
+export { Input };

package/templates/blog/pxlr-cms/packages/admin/src/components/ui/label.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const labelVariants = cva(
+  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };