json-render/examples/dashboard/components/ui/date-picker.tsx

'use client';

import { type ComponentRenderProps } from '@json-render/react';
import { useData } from '@json-render/react';
import { getByPath } from '@json-render/core';

export function DatePicker({ element }: ComponentRenderProps) {
  const { label, valuePath } = element.props as { label: string; valuePath: string };
  const { data, set } = useData();
  const value = getByPath(data, valuePath) as string | undefined;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
      <label style={{ fontSize: 14, fontWeight: 500 }}>{label}</label>
      <input
        type="date"
        value={value ?? ''}
        onChange={(e) => set(valuePath, e.target.value)}
        style={{
          padding: '8px 12px',
          borderRadius: 'var(--radius)',
          border: '1px solid var(--border)',
          background: 'var(--card)',
          color: 'var(--foreground)',
          fontSize: 16,
          outline: 'none',
        }}
      />
    </div>
  );
}