diff --git a/src/app/competents/editorHp/FormInput.tsx b/src/app/competents/editorHp/FormInput.tsx new file mode 100644 index 0000000..b68c664 --- /dev/null +++ b/src/app/competents/editorHp/FormInput.tsx @@ -0,0 +1,66 @@ +import React from "react"; +import "./hpeditor.scss"; + +interface FormInputProps { + id: string; + classN: string; + label: string; + value: string; + onChange: (value: string) => void; + type: string; + options?: { value: string; svg: string }[]; +} + +const FormInput: React.FC = ({ + id, + classN, + label, + value, + onChange, + type, + options, +}) => { + const activeType = () => { + const selectType = document.querySelector(`#${id} .select`); + if (selectType) { + selectType.classList.toggle("activeSelected"); + } + }; + + return ( +
+ + {type === "radio" ? ( +
+ {options?.map((option) => ( + + ))} +
+
+ ) : ( + onChange(e.target.value)} + /> + )} +
+ ); +}; + +export default FormInput; diff --git a/src/app/competents/editorHp/editor.tsx b/src/app/competents/editorHp/editor.tsx index 28ca7d4..026686b 100644 --- a/src/app/competents/editorHp/editor.tsx +++ b/src/app/competents/editorHp/editor.tsx @@ -1,107 +1,178 @@ -// components/Form.tsx import React, { useState } from "react"; -import "./hpeditor.scss"; +import FormInput from "./FormInput"; + interface FormProps { onFormSubmit: (formData: FormData) => void; } interface FormData { + id: string; device: string; - input2: string; + format: string; + imageLink: string; + videoLink: string; + template: string; } const EditorHp: React.FC = ({ onFormSubmit }) => { const [formData, setFormData] = useState({ + id: "", device: "", - input2: "", + format: "", + imageLink: "", + videoLink: "", + template: "", }); - const handleInputChange = ( - e: React.ChangeEvent, - fieldName: string - ) => { - setFormData((prevData) => ({ - ...prevData, - [fieldName]: e.target.value, - })); - }; - const handleDeviceChange = (e: React.ChangeEvent) => { + const handleInputChange = (fieldName: string, value: string) => { setFormData((prevData) => ({ ...prevData, - device: e.target.value, + [fieldName]: value, })); }; + const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); onFormSubmit(formData); }; return ( -
-
- -
- + + handleInputChange("device", value)} + type="radio" + id="DeviceType" + classN="toggleType" + options={[ + { + value: "Desktop", + svg: ` + + `, + }, + { + value: "Mobile", + svg: ` + + `, + }, + ]} + /> + handleInputChange("format", value)} + type="radio" + id="formatType" + classN="toggleType" + options={[ + { + value: "image", + svg: ` + + `, + }, + { + value: "video", + svg: ` + + `, + }, + ]} + /> + handleInputChange("imageLink", value)} + type="url" + id="imageLinkInput" + classN={""} + /> - - handleInputChange("videoLink", value)} + type="url" + id="videoLink" + classN={""} + /> + ) : ( + "" + )} +
+
Layout
+
+ {formData.device} + handleInputChange("template", value)} type="radio" - onChange={handleDeviceChange} - checked={formData.device === "Mobile"} + id="template" + classN="layoutTemplate" + options={[ + { + value: "Image only", + svg: ` + + `, + }, + { + value: "Text center", + svg: ` + + + + + `, + }, + { + value: "Full image right", + svg: ` + + + + + `, + }, + { + value: "Full image left", + svg: ` + + + + + `, + }, + { + value: "Full half left", + svg: ` + + + + + + `, + }, + { + value: "Full half right", + svg: ` + + + + + + `, + }, + ]} /> - +
-
- - handleInputChange(e, "input2")} - /> -
- {formData.device === "Desktop" - ? "Templates Of Desktop" - : "Templates Of Mobile"} - ); }; diff --git a/src/app/competents/editorHp/hpeditor.scss b/src/app/competents/editorHp/hpeditor.scss index addb47a..89594d5 100644 --- a/src/app/competents/editorHp/hpeditor.scss +++ b/src/app/competents/editorHp/hpeditor.scss @@ -2,68 +2,89 @@ padding-left: 32px; } -.forminput { +.form-input { margin-bottom: 21px; - label { - font-size: 18px; - font-style: normal; - font-weight: 400; - line-height: normal; - color: #000; - padding-right: 10px; - } - + display: flex; + align-items: center; } +.labelTxt { + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: normal; + color: #000; + padding-right: 10px; +} -.btn{ - display: inline-block; +.toggleType { + display: flex; + border-radius: 4px; + border: 1px solid #F0F1F1; + background: #F4FAFE; position: relative; - text-align: center; - transition: background 600ms ease, color 600ms ease; -} -// .toggleType{ -// background: #F4FAFE; -// width: 101px; -// } -input[type="radio"].toggle { - display: none; - & + label{ + width: 99px; + height: 32px; + justify-content: space-between; + align-items: center; + + input[type="radio"] { + -webkit-appearance: none; + appearance: none; + background-color: #fff; + margin: 0; + cursor: pointer; + width: 100%; + height: 100%; + display: block; + } + + .areaOfType { + width: 45px; + text-align: center; + z-index: 1; cursor: pointer; - min-width: 45px; - &:hover{ - background: none; - } - &:after{ - background: #FFF; - content: ""; - height: 100%; - position: absolute; - top: 0; - transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1); - width: 45px; - z-index: 1; - border: 1px solid #F1F1F1; - } } - &.toggle-left + label { - border-right: 0; - &:after{ - left: 100% - } + + .areaOfinput { + width: 45px; + display: inline-flex; + height: 28px; + justify-content: center; + align-items: center; } - &.toggle-right + label{ - margin-left: -5px; - &:after{ - left: -100%; - } + + .select { + border-radius: 2px; + border: 1px solid #F1F1F1; + background: #FFF; + position: absolute; + width: 45.33px; + height: 28px; + left: 0px; + transition: 0.1s; } - &:checked + label { - cursor: default; - color: #791616; - transition: color 200ms; - &:after{ - left: 0; - } + + .activeSelected { + left: 51px; } } + +.LayoutTemplates { + width: 534px; + border-radius: 12px; + border: 1px solid #DBE1E5; + padding-bottom: 20px; + overflow: hidden; +} + +.title { + background: #F1F3F4; + height: 45px; + padding-left: 12px; + color: #000; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: 45px; +} \ No newline at end of file diff --git a/src/app/competents/layout/PreviewBanner.tsx b/src/app/competents/layout/PreviewBanner.tsx new file mode 100644 index 0000000..4e23482 --- /dev/null +++ b/src/app/competents/layout/PreviewBanner.tsx @@ -0,0 +1,21 @@ +// PreviewBanner.tsx +import React from "react"; + +interface PreviewBannerProps { + ImageLink: string; + VideoLink: string; +} + +const PreviewBanner: React.FC = ({ + ImageLink, + VideoLink, +}) => { + return ( +
+

{ImageLink}

+

{VideoLink}

+
+ ); +}; + +export default PreviewBanner; diff --git a/src/app/competents/layout/PreviewCode.tsx b/src/app/competents/layout/PreviewCode.tsx new file mode 100644 index 0000000..fae729b --- /dev/null +++ b/src/app/competents/layout/PreviewCode.tsx @@ -0,0 +1,18 @@ +// PreviewBanner.tsx +import React from "react"; + +interface PreviewCode { + ImageLink: string; + VideoLink: string; +} + +const PreviewCode: React.FC = ({ ImageLink, VideoLink }) => { + return ( +
+

{ImageLink}

+

{VideoLink}

+
+ ); +}; + +export default PreviewCode; diff --git a/src/app/competents/layout/layout.tsx b/src/app/competents/layout/layout.tsx index e6f3da3..f051108 100644 --- a/src/app/competents/layout/layout.tsx +++ b/src/app/competents/layout/layout.tsx @@ -1,9 +1,12 @@ +/* eslint-disable react/jsx-no-duplicate-props */ // components/Layout.tsx "use client"; import React from "react"; import Navbar from "../navbar/navbar"; import "./layout.scss"; import Image from "next/image"; +import PreviewBanner from "./PreviewBanner"; +import PreviewCode from "./PreviewCode"; interface LayoutProps { children: React.ReactNode; currentPage: string; @@ -44,8 +47,14 @@ const Layout: React.FC = ({ )} {currentPage === "HP" && (
-

Input value from Input 1 (HP): {formDataHp.device}

-

Input value from Input 2 (HP): {formDataHp.input2}

+ +
)}