56 lines
1.9 KiB
TypeScript
56 lines
1.9 KiB
TypeScript
|
export const Field = ({ title, value, inlined, index, onUpdate }) => {
|
||
|
|
return (
|
||
|
|
<div data-inlined={inlined ? "1" : "0"} class="embed-field-box" key={index}>
|
||
|
|
<label class="is-sr-only" for="embedFieldTitle">
|
||
|
|
Field Title
|
||
|
|
</label>
|
||
|
|
<div class="is-flex">
|
||
|
|
<textarea
|
||
|
|
class="discord-field-title field-input message-input autoresize"
|
||
|
|
placeholder="Field Title..."
|
||
|
|
rows={1}
|
||
|
|
maxlength={256}
|
||
|
|
name="embed_field_title[]"
|
||
|
|
value={title}
|
||
|
|
onInput={(ev) =>
|
||
|
|
onUpdate({
|
||
|
|
index,
|
||
|
|
title: ev.currentTarget.value,
|
||
|
|
})
|
||
|
|
}
|
||
|
|
></textarea>
|
||
|
|
<button
|
||
|
|
class="button is-small inline-btn"
|
||
|
|
onClick={() => {
|
||
|
|
onUpdate({
|
||
|
|
index,
|
||
|
|
inlined: !inlined,
|
||
|
|
});
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<span class="is-sr-only">Toggle field inline</span>
|
||
|
|
<i class="fas fa-arrows-h"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<label class="is-sr-only" for="embedFieldValue">
|
||
|
|
Field Value
|
||
|
|
</label>
|
||
|
|
<textarea
|
||
|
|
class="discord-field-value field-input message-input autoresize "
|
||
|
|
placeholder="Field Value..."
|
||
|
|
maxlength={1024}
|
||
|
|
name="embed_field_value[]"
|
||
|
|
rows={1}
|
||
|
|
value={value}
|
||
|
|
onInput={(ev) =>
|
||
|
|
onUpdate({
|
||
|
|
index,
|
||
|
|
value: ev.currentTarget.value,
|
||
|
|
})
|
||
|
|
}
|
||
|
|
></textarea>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|