Skip to content

Commit

Permalink
fix UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@ichiro-ss
ichiro-ss committed Apr 17, 2024
1 parent 0fccaaa commit 8df3e33
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 76 deletions.
2 changes: 2 additions & 0 deletions src/pages/Edit.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,7 @@ export const Edit = () => {
type="text"
onChange={(e) => setSummary({ ...summary, markdown: e.target.value })}
id="markdown"
className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5"
/>
</label>
<div>
Expand All @@ -162,6 +163,7 @@ export const Edit = () => {
newAuthors[index] = e.target.value;
setSummary({ ...summary, authors: newAuthors });
}}
className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5"
/>
<button
type="button"
Expand Down
155 changes: 79 additions & 76 deletions src/pages/NewSummary.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,87 +51,90 @@ export const NewSummary = () => {
<div>
<Header />
<main className="newSummary">
<p className="error-msg">{errorMessage}</p>
<div className="w-full border bg-gray-200 border-gray-200 rounded-lg shadow md:mt-0 sm:max-w-md xl:p-0">
<div className="p-6 space-y-4 md:space-y-6 sm:p-8">
<form className="space-y-4 md:space-y-6" onSubmit={handleSubmit(onNewSummary)}>
{/* eslint-disable */}
<div>
<label htmlFor="title" className="text-left block mb-2 text-sm font-medium text-gray-900">
title
<input
{...register('title', {
required: 'please input title',
maxLength: {
value: 120,
message: 'maxLength: 120',
},
})}
type="text"
onChange={handleTitleChange}
id="title"
className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5"
/>
</label>
</div>
<div>
<label htmlFor="markdown" className="text-left block mb-2 text-sm font-medium text-gray-900">
markdown
<textarea
{...register('markdown', {
required: 'please input markdown',
})}
type="text"
onChange={handleMarkdownChange}
id="markdown"
/>
</label>
</div>
<div>
<label htmlFor="authors">
<div className="block text-left">authors</div>
{fields.map((field, index) => (
<div key={field.id}>
<input
{...register(`authors.${index}.name`, {
required: 'please input name',
})}
type="text"
onChange={(e) => {
const newAuthors = [...authors];
newAuthors[index] = e.target.value;
setAuthors(newAuthors);
}}
/>
<div className="flex flex-col items-center px-6 py-8 mx-auto md:h-screen lg:py-0">
<p className="error-msg">{errorMessage}</p>
<div className="w-full border bg-gray-200 border-gray-200 rounded-lg shadow md:mt-0 sm:max-w-md xl:p-0">
<div className="p-6 space-y-4 md:space-y-6 sm:p-8">
<form className="space-y-4 md:space-y-6" onSubmit={handleSubmit(onNewSummary)}>
{/* eslint-disable */}
<div>
<label htmlFor="title" className="text-left block mb-2 text-sm font-medium text-gray-900">
title
<input
{...register('title', {
required: 'please input title',
maxLength: {
value: 120,
message: 'maxLength: 120',
},
})}
type="text"
onChange={handleTitleChange}
id="title"
className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5"
/>
</label>
</div>
<div>
<label htmlFor="markdown" className="text-left block mb-2 text-sm font-medium text-gray-900">
markdown
<textarea
{...register('markdown', {
required: 'please input markdown',
})}
type="text"
onChange={handleMarkdownChange}
id="markdown"
className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5"
/>
</label>
</div>
<div>
<label htmlFor="authors">
<div className="block text-left">authors</div>
{fields.map((field, index) => (
<div key={field.id}>
<input
{...register(`authors.${index}.name`, {
required: 'please input name',
})}
type="text"
onChange={(e) => {
const newAuthors = [...authors];
newAuthors[index] = e.target.value;
setAuthors(newAuthors);
}}
/>
<button
type="button"
onClick={() => remove(index)}
className="text-gray-800 hover:bg-gray-300 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-2 py-2 lg:py-2 mr-2"
>
DELETE
</button>
</div>
))}
<div className="flex justify-end">
<button
type="button"
onClick={() => remove(index)}
className="text-gray-800 hover:bg-gray-300 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-2 py-2 lg:py-2 mr-2"
onClick={() => append('')}
className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-4 lg:px-2 py-2 lg:py-2 mr-2"
>
DELETE
ADD
</button>
</div>
))}
<div className="flex justify-end">
<button
type="button"
onClick={() => append('')}
className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-4 lg:px-2 py-2 lg:py-2 mr-2"
>
ADD
</button>
</div>
</label>
</div>
{errors.name && <div>{errors.name.message}</div>}
<button
type="submit"
className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-4 lg:px-2 py-2 lg:py-2 mr-2"
>
POST
</button>
{/* eslint-enable */}
</form>
</label>
</div>
{errors.name && <div>{errors.name.message}</div>}
<button
type="submit"
className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-4 lg:px-2 py-2 lg:py-2 mr-2"
>
POST
</button>
{/* eslint-enable */}
</form>
</div>
</div>
</div>
</main>
Expand Down

0 comments on commit 8df3e33

Please sign in to comment.