test

sample.md

accordion token

export const accordion = {
  root: {
    borderColor: { value: '{colors.gray.1000}' },
    paddingInline: { value: '{spacing.2}' },
    paddingBlock: { value: '{spacing.2}' },
    borderRadius: { value: '{radii.sm}' },
  },
  item: {
    color: { value: '{colors.gray.1000}' },
    borderColor: { value: '{colors.gray.800}' },
  },
  itemContent: {
    color: { value: '{colors.gray.1600}' },
  },
}

accordion slot recipe

import { accordionAnatomy } from '@ark-ui/anatomy'
import { defineSlotRecipe } from '@pandacss/dev';

export const accordionSlotRecipe = defineSlotRecipe({
    className: 'accordion',
    slots: accordionAnatomy.keys(),
    base: {
      root: {
        paddingBlock: 'token(accordion.root.paddingBlock)',
        paddingInline: 'token(accordion.root.paddingInline)',
        borderStyle: 'solid',
        borderWidth: '1px',
        borderColor: 'token(accordion.root.borderColor)',
        borderRadius: 'token(accordion.root.borderRadius)',
      },
      item: {
        position: 'relative',
        padding: '10px',
        color: 'token(accordion.item.color)',
        '& + &': {
          borderTop: '1px solid',
          borderColor: 'token(accordion.item.borderColor)',
        },
      },
      itemTrigger: {
        width: '100%',
        textAlign: 'left',
        textStyle: 'labelMedium',
      },
      itemContent: {
        marginTop: '10px',
        textStyle: 'bodySmall',
        color: 'token(accordion.itemContent.color)',
      },
      itemIndicator: {
        position: 'absolute',
        top: '0',
        transform: 'translateY(50%)',
        right: '10px',
        fontSize: 0,
        _before: {
          content: "'📂'",
          fontSize: '1rem',
        },
        _closed: {
          _before: {
            content: "'📁'",
          },
        },
      },
    },
    variants: {

    },
  },
);

이건 GPT3.5 가 만들어준 코드에요.

import React from 'react';

const AccordionRoot = ({ children }) => {
  return (
    <div className="accordion__root">
      {children}
    </div>
  );
};

export default AccordionRoot;

import React from 'react';

const AccordionItem = ({ isOpen, onToggle, children }) => {
  const itemClassName = `accordion__item ${isOpen ? 'open' : ''}`;

  return (
    <div className={itemClassName} onClick={onToggle}>
      {children}
    </div>
  );
};

export default AccordionItem;

import React from 'react';

const AccordionTrigger = ({ children }) => {
  return (
    <button className="accordion__itemTrigger">
      {children}
    </button>
  );
};

export default AccordionTrigger;

import React from 'react';

const AccordionContent = ({ isOpen, children }) => {
  const contentClassName = `accordion__itemContent ${isOpen ? 'open' : ''}`;

  return isOpen ? <div className={contentClassName}>{children}</div> : null;
};

export default AccordionContent;

import React from 'react';

const AccordionItemIndicator = ({ children }) => {
  return (
    <div className="accordion__itemIndicator">
      {children}
    </div>
  );
};

export default AccordionItemIndicator;