aitori-stylist/frontend/src/pages/dashboard/simulation/SimulationEditPage.tsx

import { Link } from 'react-router-dom'
import { Helmet } from 'react-helmet-async'
import { usePageContext } from '../../../shared/pageContext'
import { DashboardLayout } from '../../../layouts/DashboardLayout'

export function SimulationEditPage() {
  const { locale, path, copy } = usePageContext()
  const pageCopy = copy.simulationEditPage

  return (
    <DashboardLayout>
      <Helmet>
        <html lang={locale === 'ja' ? 'ja' : 'zh-CN'} />
        <title>{`Aitori Stylist | ${pageCopy.title}`}</title>
        <meta name="description" content={pageCopy.description} />
      </Helmet>
      <section className="stylist-workbench-top ipad-top-space-margin mb-2">
        <div className="container">
          <div className="d-flex align-items-center justify-content-between flex-wrap gap-3 mb-4">
            <Link
              to={path('/simulation')}
              className="btn btn-small btn-rounded btn-transparent-light-gray border border-1 border-color-dark-gray fw-700"
            >
              <i className="feather icon-feather-arrow-left me-6px"></i>
              {pageCopy.back}
            </Link>
          </div>
          <div className="workbench-panel bg-white border-radius-8px box-shadow-extra-large p-30px">
            <span className="bg-base-color d-inline-block mb-15px fw-600 text-white text-uppercase border-radius-30px ps-20px pe-20px fs-12">
              {pageCopy.badge}
            </span>
            <h1 className="fw-700 text-dark-gray ls-minus-1px mb-10px">{pageCopy.title}</h1>
            <p className="fs-18 lh-30 mb-0">{pageCopy.lead}</p>
          </div>
        </div>
      </section>
      <section className="pt-0">
        <div className="container">
          <div className="workbench-panel bg-white border-radius-8px box-shadow-extra-large p-30px">
            <h2 className="fw-700 text-dark-gray fs-26 mb-15px">{pageCopy.state.title}</h2>
            <p className="fs-18 lh-30 text-medium-gray mb-25px">{pageCopy.state.description}</p>
            <Link to={path('/simulation')} className="btn btn-large btn-rounded btn-base-color btn-box-shadow fw-700">
              {pageCopy.state.action}
            </Link>
          </div>
        </div>
      </section>
    </DashboardLayout>
  )
}