feat: implement custom project data image

2026-08-20 06:29:07 +00:00 · 2025-07-11 18:42:09 +02:00
parent d8c1c38123
commit 138c6523d2
13 changed files with 130 additions and 116 deletions
@@ -87,7 +87,7 @@ export default function ProjectData() {
  };

  const handleAddCustom = () => {
-    append({ title: '', value: '' });
+    append({ title: '', value: '', url: '' });
  };

  const onSubmit = async (formData: ProjectData) => {
@@ -208,7 +208,7 @@ export default function ProjectData() {
                return (
                  <div key={field.id} className={style.customDataItem}>
                    <div className={style.titleRow}>
-                      <label>
+                      <label className={style.title}>
                        Title
                        <Input
                          fluid
@@ -221,12 +221,12 @@ export default function ProjectData() {
                      </label>
                      <Button variant='subtle-destructive' onClick={() => remove(idx)}>
                        <IoTrash />
-                        Delete Entry
+                        Delete
                      </Button>
                    </div>
                    {rowErrors?.title?.message && <Panel.Error>{rowErrors.title.message}</Panel.Error>}
                    <label>
-                      Value
+                      Text
                      <Textarea
                        fluid
                        rows={3}
@@ -239,6 +239,20 @@ export default function ProjectData() {
                      />
                      {rowErrors?.value?.message && <Panel.Error>{rowErrors.value.message}</Panel.Error>}
                    </label>
+                    <label>
+                      Image URL (optional)
+                      <div className={style.customImage}>
+                        <Input
+                          fluid
+                          defaultValue={field.value}
+                          placeholder='Paste image URL (optional)'
+                          {...register(`custom.${idx}.url`)}
+                        />
+                        <div className={style.imageContainer}>
+                          <img src={watch(`custom.${idx}.url`)} alt='' loading='lazy' className='info__image' />
+                        </div>
+                      </div>
+                    </label>
                  </div>
                );
              })}
@@ -31,3 +31,15 @@
    flex: 1;
  }
 }
+
+.customImage {
+  display: grid;
+  grid-template-columns: 1fr 72px;
+  gap: 1rem;
+}
+
+.imageContainer {
+  width: 72px;
+  height: 72px;
+  background-color: $gray-1250;
+}