ChatGPTの画像入力を使ったマークアップの自動生成とE2E自動化に関する考察

.container {
  display: grid;
  grid-template-rows: auto auto 1fr;
  grid-template-columns: 2fr 1fr;
  grid-template-areas: 
    "header header"
    "nav nav"
    "main sidebar"
    "footer footer";
}

.header {
  grid-area: header;
}

.nav {
  grid-area: nav;
}

.main {
  grid-area: main;
}

.sidebar {
  grid-area: sidebar;
}

.footer {
  grid-area: footer;
}

:root {
  --header-height: 50px;
  --sidebar-title-height: 40px;
  --main-title-height: 30px;
  --content-footer-height: 25px;
  --footer-height: 45px;
}

.container {
  display: grid;
  grid-template-rows: var(--header-height) 1fr var(--footer-height);
  grid-template-columns: 1fr 3fr;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
  display: grid;
  grid-template-rows: var(--sidebar-title-height) 1fr;
  grid-template-columns: 1fr;
  grid-template-areas:
    "sidebar-title"
    "menu-items";
}

.sidebar-title {
  grid-area: sidebar-title;
}

.menu-items {
  grid-area: menu-items;
}

.main {
  grid-area: main;
  display: grid;
  grid-template-rows: var(--main-title-height) 1fr var(--content-footer-height);
  grid-template-columns: subgrid;
  grid-template-areas:
    "main-title"
    "content"
    "content-footer";
}

.main-title {
  grid-area: main-title;
}

.content {
  grid-area: content;
}

.content-footer {
  grid-area: content-footer;
}

.footer {
  grid-area: footer;
}

<svg width="410" height="372" xmlns="http://www.w3.org/2000/svg">
    <!-- 背景色 -->
    <rect width="410" height="372" fill="white" />

    <!-- ウサギの本体 -->
    <ellipse cx="205" cy="186" rx="150" ry="190" fill="white" stroke="black" stroke-width="2" />

    <!-- ウサギの顔 -->
    <ellipse cx="205" cy="100" rx="90" ry="80" fill="white" stroke="black" stroke-width="2" />

    <!-- 左の目 -->
    <ellipse cx="175" cy="80" rx="10" ry="15" fill="black" />
    <!-- 右の目 -->
    <ellipse cx="235" cy="80" rx="10" ry="15" fill="black" />

    <!-- 鼻 -->
    <ellipse cx="205" cy="100" rx="5" ry="8" fill="red" />

    <!-- リボン -->
    <polygon points="205,140 185,120 225,120" fill="green" />

    <!-- 口 -->
    <path d="M 190 110 Q 205 130 220 110" fill="none" stroke="red" stroke-width="2" />

    <!-- 左の耳 -->
    <path d="M 130 10 Q 150 50 170 10" fill="white" stroke="black" stroke-width="2" />
    <!-- 右の耳 -->
    <path d="M 240 10 Q 260 50 280 10" fill="white" stroke="black" stroke-width="2" />
</svg>

import { Tab } from '@headlessui/react';
function MyTabs(props: { tabs: Array<{title: React.ReactNode, content: React.ReactNode}>}) {
  return (
    <Tab.Group>
      <Tab.List>
        {props.tabs.map((tab, idx) => <Tab key={idx}>{tab.title}</Tab>)}
      </Tab.List>
      <Tab.Panels>
        {props.tabs.map((tab, idx) => <Tab.Panel key={idx}>{tab.content}</Tab.Panel>)}
      </Tab.Panels>
    </Tab.Group>
  )
}

import { Tab } from '@headlessui/react';

interface TabProps {
  tabs: Array<{
    title: React.ReactNode;
    content: React.ReactNode;
  }>;
}

const MyTabs: React.FC<TabProps> = (props) => {
  return (
    <Tab.Group>
      <Tab.List className="flex p-1 space-x-1 bg-gray-100">
        {props.tabs.map((tab, idx) => (
          <Tab
            key={idx}
            className={({ selected }) =>
              selected
                ? 'py-2 px-4 bg-blue-500 text-white rounded-lg'
                : 'py-2 px-4 bg-white hover:bg-gray-200 text-gray-800 rounded-lg'
            }
          >
            {tab.title}
          </Tab>
        ))}
      </Tab.List>
      <Tab.Panels className="mt-2">
        {props.tabs.map((tab, idx) => (
          <Tab.Panel 
            key={idx}
            className="p-4 bg-white shadow rounded-lg"
          >
            {tab.content}
          </Tab.Panel>
        ))}
      </Tab.Panels>
    </Tab.Group>
  );
}

export default MyTabs;

import { Tab } from '@headlessui/react';

interface TabProps {
  tabs: Array<{
    title: React.ReactNode;
    content: React.ReactNode;
  }>;
}

const MyTabs: React.FC<TabProps> = (props) => {
  return < />
}

import React from 'react';
import { Tab } from '@headlessui/react';

interface TabProps {
  tabs: Array<{
    title: React.ReactNode;
    content: React.ReactNode;
  }>;
}

const MyTabs: React.FC<TabProps> = ({ tabs }) => {
  return (
    <Tab.Group>
      <div className="flex justify-center">
        <Tab.List className="flex p-1 space-x-1 bg-blue-900 rounded-xl">
          {tabs.map((tab, idx) => (
            <Tab
              key={idx}
              className={({ selected }) =>
                selected
                  ? 'py-2.5 px-6 bg-blue-600 text-white rounded-lg'
                  : 'py-2.5 px-6 bg-white text-gray-500 hover:bg-blue-200 rounded-lg'
              }
            >
              {tab.title}
            </Tab>
          ))}
        </Tab.List>
      </div>
      <Tab.Panels className="mt-2">
        {tabs.map((tab, idx) => (
          <Tab.Panel
            key={idx}
            className="p-4 border rounded-xl border-blue-200"
          >
            {tab.content}
          </Tab.Panel>
        ))}
      </Tab.Panels>
    </Tab.Group>
  );
};

export default MyTabs;