@hanamura/rcgen/dist/templates/components/Switcher.tsx.tmpl.js

Generate optimized React container components from configuration

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = render;
const utils_1 = require("../../src/utils");
/**
 * Render the Switcher component
 */
function render(config) {
    // If a variable prefix is provided, use it
    const prefix = config.variablePrefix ? `${config.variablePrefix}-` : '';
    return `// generated by static-generator
'use client'

import React from 'react'

import { QueryName } from '../types'
import { useMediaQueries } from '../useMediaQueries'

import styles from './Switcher.module.css'

/**
 * Options for the Switcher component
 */
export type SwitcherOptions = {
  /**
   * Content
   */
  content?: React.ReactNode | undefined
}

/**
 * Props for the Switcher component
 */
export type SwitcherProps = {
  /**
   * Options for the Switcher component
   */
  options?: SwitcherOptions | undefined

  /**
   * Adaptive options for the Switcher component
   */
  adaptiveOptions?: Record<QueryName, SwitcherOptions> | undefined
}

/**
 * Switcher component
 */
export function Switcher({
  options,
  adaptiveOptions
}: SwitcherProps) {
  const activeContext = useMediaQueries(${JSON.stringify(config.queries)}, undefined)

  const content = {
    ${config.queries
        .map((query) => {
        const n = (0, utils_1.normalizeName)(query.name);
        return `'${n}': adaptiveOptions?.['${n}']?.content ?? options?.content,`;
    })
        .join('\n')}
  }

  return typeof activeContext === 'undefined' ? (
    <>
      ${config.queries.map((query) => {
        const n = (0, utils_1.normalizeName)(query.name);
        return `{content['${n}'] && (
          <div className={\`\${styles['item']} \${styles['is:${n}']}\`}>
            {content['${n}']}
          </div>
        )}`;
    })}
    </>
  ) : (
    content[activeContext] && (
      <div className={\`\${styles['item']} \${styles['isActive']}\`}>
        {content[activeContext]}
      </div>
    )
  )
}
`;
}