WIP

src/components/Views/Create.module.scss

@@ -23,3 +23,31 @@
     margin: 0 divide($container-padding-x, 2);
   }
 }
+
+.container {
+  .titleInput,
+  .subtitleInput {
+    border: 0;
+    outline: 0;
+    padding: 0;
+    font-size: 36px;
+
+    &::placeholder {
+      opacity: 0.3;
+      color: #000;
+    }
+  }
+
+  .titleInput {
+    font-weight: 700;
+  }
+}
+
+.createSettings,
+.create {
+  display: none;
+
+  &.visible {
+    display: block;
+  }
+}

src/components/Views/Create.tsx

@@ -5,9 +5,12 @@ import { clsx } from 'clsx'
 import styles from './Create.module.scss'
 import { Title } from '@solidjs/meta'
 import { createStore } from 'solid-js/store'
-import type { ShoutInput, Topic } from '../../graphql/types.gen'
+import type { Topic } from '../../graphql/types.gen'
 import { apiClient } from '../../utils/apiClient'
 import { TopicSelect } from '../Editor/TopicSelect/TopicSelect'
+import { router, useRouter } from '../../stores/router'
+import { getPagePath } from '@nanostores/router'
+import { translit } from '../../utils/ru2en'
 
 const Editor = lazy(() => import('../Editor/Editor'))
 
@@ -25,6 +28,9 @@ export const CreateView = () => {
   const { t } = useLocalize()
 
   const [topics, setTopics] = createSignal<Topic[]>(null)
+  const { page } = useRouter()
+
+  const [isSlugChanged, setIsSlugChanged] = createSignal(false)
 
   const [form, setForm] = createStore<ShoutForm>({
     slug: '',
@@ -45,8 +51,27 @@ export const CreateView = () => {
     e.preventDefault()
   }
 
+  const handleTitleInputChange = (e) => {
+    const title = e.currentTarget.value
+    setForm('title', title)
+
+    if (!isSlugChanged()) {
+      const slug = translit(title).replaceAll(' ', '-')
+      setForm('slug', slug)
+    }
+  }
+
+  const handleSlugInputChange = (e) => {
+    const slug = e.currentTarget.value
+
+    if (slug !== form.slug) {
+      setIsSlugChanged(true)
+    }
+    setForm('slug', slug)
+  }
+
   return (
-    <>
+    <div class={styles.container}>
       <Title>{t('Write an article')}</Title>
       <Suspense fallback={<Loading />}>
         <form onSubmit={handleFormSubmit}>
@@ -54,34 +79,23 @@ export const CreateView = () => {
             <div class="shift-content">
               <div class="row">
                 <div class="col-md-20 col-lg-18 col-xl-16">
-                  <h4>Slug</h4>
+                  <div
-                  <div class="pretty-form__item">
+                    class={clsx(styles.create, {
-                    <input
+                      [styles.visible]: page().route === 'create'
-                      type="text"
+                    })}
-                      name="slug"
+                  >
-                      id="slug"
-                      value={form.slug}
-                      onChange={(e) => setForm('slug', e.currentTarget.value)}
-                    />
-                    <label for="slug">Slug</label>
-                  </div>
-
-                  <h4>Заголовок</h4>
-                  <div class="pretty-form__item">
                     <input
+                      class={styles.titleInput}
                       type="text"
                       name="title"
                       id="title"
-                      placeholder="Придумайте заголовок вашей истории"
+                      placeholder="Заголовок"
                       value={form.title}
-                      onChange={(e) => setForm('title', e.currentTarget.value)}
+                      onChange={handleTitleInputChange}
                     />
-                    <label for="title">Придумайте заголовок вашей истории</label>
-                  </div>
 
-                  <h4>Подзаголовок</h4>
-                  <div class="pretty-form__item">
                     <input
+                      class={styles.subtitleInput}
                       type="text"
                       name="subtitle"
                       id="subtitle"
@@ -89,12 +103,33 @@ export const CreateView = () => {
                       value={form.subtitle}
                       onChange={(e) => setForm('subtitle', e.currentTarget.value)}
                     />
-                    <label for="subtitle">Подзаголовок</label>
-                  </div>
 
                     <Editor onChange={(body) => setForm('body', body)} />
 
+                    <div class={styles.saveBlock}>
+                      {/*<button class={clsx('button button--outline', styles.button)}>Сохранить</button>*/}
+                      <a href={getPagePath(router, 'createSettings')}>Настройки</a>
+                    </div>
+                  </div>
+                  <div
+                    class={clsx(styles.createSettings, {
+                      [styles.visible]: page().route === 'createSettings'
+                    })}
+                  >
                     <h1>Настройки публикации</h1>
+
+                    <h4>Slug</h4>
+                    <div class="pretty-form__item">
+                      <input
+                        type="text"
+                        name="slug"
+                        id="slug"
+                        value={form.slug}
+                        onChange={handleSlugInputChange}
+                      />
+                      <label for="slug">Slug</label>
+                    </div>
+
                     {/*<h4>Лид</h4>*/}
                     {/*<div class="pretty-form__item">*/}
                     {/*  <textarea name="lead" id="lead" placeholder="Лид"></textarea>*/}
@@ -160,6 +195,7 @@ export const CreateView = () => {
                         опубликовать ваш текст
                       </p>
                       {/*<button class={clsx('button button--outline', styles.button)}>Сохранить</button>*/}
+                      <a href={getPagePath(router, 'create')}>Назад</a>
                       <button type="submit" class={clsx('button button--submit', styles.button)}>
                         Опубликовать
                       </button>
@@ -168,9 +204,10 @@ export const CreateView = () => {
                 </div>
               </div>
             </div>
+          </div>
         </form>
       </Suspense>
-    </>
+    </div>
   )
 }