prepare frontend edit view

Author: jeanbfly

@apps/front/translations/curriculums/en-us.yaml

@@ -15,3 +15,6 @@ validation:
 create:
   createSuccess: 'Curriculum vitae created successfully'
   title: 'Title'
+edit:
+  returnToList: 'Return to list'
+  download: 'Download'

@apps/front/translations/curriculums/fr-fr.yaml

@@ -15,3 +15,6 @@ validation:
 create:
   createSuccess: 'Le curriculum vitae a été créé avec succès'
   title: 'Titre'
+edit:
+  returnToList: 'Retour à la liste'
+  download: 'Télécharger'

@libs/users-front/src/assets/icons/cvBig.gts

@@ -0,0 +1,20 @@
+import type { TOC } from '@ember/component/template-only';
+
+const ReturnArrowIcon: TOC<{ Element: SVGSVGElement }> = <template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="size-6"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"
+    />
+  </svg>
+</template>;
+
+export default ReturnArrowIcon;

@libs/users-front/src/assets/icons/returnArrow.gts

@@ -0,0 +1,21 @@
+import Component from '@glimmer/component';
+import t from 'ember-intl/helpers/t';
+import DownloadIcon from '#src/assets/icons/download.gts';
+
+class CurriculumDownloadButton extends Component<object> {
+  get curriculumPreview() {
+    return [];
+  }
+
+  <template>
+    <button
+      type="button"
+      class="flex items-center gap-2 text-sm text-white border border-gray-400 rounded px-3 py-1 hover:bg-gray-700"
+    >
+      <DownloadIcon />
+      {{t "curriculums.edit.download"}}
+    </button>
+  </template>
+}
+
+export default CurriculumDownloadButton;

@libs/users-front/src/components/curriculums/edit/curriculum-edit-download-button.gts

@@ -0,0 +1,21 @@
+import Component from '@glimmer/component';
+import t from 'ember-intl/helpers/t';
+import ReturnArrowIcon from '#src/assets/icons/returnArrow.gts';
+
+class CurriculumReturnButton extends Component<object> {
+  get curriculumPreview() {
+    return [];
+  }
+
+  <template>
+    <button
+      type="button"
+      class="flex items-center gap-2 text-sm text-white border border-gray-400 rounded px-3 py-1 hover:bg-gray-700"
+    >
+      <ReturnArrowIcon />
+      {{t "curriculums.edit.returnToList"}}
+    </button>
+  </template>
+}
+
+export default CurriculumReturnButton;

@libs/users-front/src/components/curriculums/edit/curriculum-edit-return-button.gts

@@ -0,0 +1,23 @@
+import Component from '@glimmer/component';
+import EditReturnButton from '#src/components/curriculums/edit/curriculum-edit-return-button.gts';
+import EditDownloadButton from '#src/components/curriculums/edit/curriculum-edit-download-button.gts';
+
+class CurriculumTopBar extends Component<object> {
+  get curriculumPreview() {
+    return [];
+  }
+
+  <template>
+    <div
+      class="flex flex-row bg-[#1D1D20] px-4 py-4 items-center justify-between"
+    >
+      <EditReturnButton />
+      <div class="text-center text-sm font-medium text-white size-fit">
+        Titre du CV
+      </div>
+      <EditDownloadButton />
+    </div>
+  </template>
+}
+
+export default CurriculumTopBar;

@libs/users-front/src/components/curriculums/edit/curriculum-edit-top-bar.gts

@@ -6,7 +6,7 @@ class CurriculumEditView extends Component<object> {
   }
 
   <template>
-    <div class="flex flex-col gap-4">
+    <div class="flex flex-col border-2 border-gray-300 w-full">
       The edit page
     </div>
   </template>

@libs/users-front/src/components/curriculums/edit/curriculum-edit-view.gts

@@ -1,12 +1,16 @@
 import Component from '@glimmer/component';
+import CvIcon from '#src/assets/icons/cvBig.gts';
+
 class CurriculumPreview extends Component<object> {
   get curriculumPreview() {
     return [];
   }
 
   <template>
-    <div class="flex flex-col gap-4">
-      the preview page
+    <div
+      class="flex flex-col border-2 border-gray-300 w-full p-4 items-center justify-center"
+    >
+      <CvIcon />
     </div>
   </template>
 }

@libs/users-front/src/components/curriculums/edit/curriculum-preview.gts

@@ -3,10 +3,16 @@ import type CurriculumsEdit from './edit.gts';
 
 import CurriculumPreview from '#src/components/curriculums/edit/curriculum-preview.gts';
 import CurriculumEditView from '#src/components/curriculums/edit/curriculum-edit-view.gts';
+import CurriculumEditTopBar from '#src/components/curriculums/edit/curriculum-edit-top-bar.gts';
 
 export default <template>
-  <CurriculumEditView />
-  <CurriculumPreview />
+  <div class="flex flex-col">
+    <CurriculumEditTopBar />
+    <div class="flex flex-row">
+      <CurriculumEditView />
+      <CurriculumPreview />
+    </div>
+  </div>
 </template> as TOC<{
   model: Awaited<ReturnType<CurriculumsEdit['model']>>;
   controller: undefined;