Skip to content

Commit 1cd0eea

Browse files
JaneSjsJaneSjs
committed
Update styles
1 parent b1aeec4 commit 1cd0eea

File tree

1 file changed

+73
-73
lines changed
  • blogpost-apps/nextjs-form-builder/src/app

1 file changed

+73
-73
lines changed

‎blogpost-apps/nextjs-form-builder/src/app/page.tsx‎

Lines changed: 73 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -85,83 +85,83 @@ export default function Home() {
8585
return <div className="flex items-center justify-center h-screen">Loading...</div>;
8686
}
8787

88-
return (
89-
<div className="min-h-screen bg-gray-50">
90-
<div className="flex h-[calc(100vh-6rem)]">
91-
<aside className="hidden lg:block xl:w-96 bg-white shadow-sm border-r border-gray-200 overflow-y-auto p-4">
92-
<div className="flex justify-between items-center mb-4">
93-
<h2 className="font-semibold text-gray-800 tracking-wide uppercase">
94-
Saved Surveys
95-
</h2>
96-
{savedSurveys.length > 0 && (
88+
return (
89+
<div className="min-h-screen bg-gray-50">
90+
<div className="flex h-[calc(100vh-6rem)]">
91+
<aside className="hidden lg:block xl:w-96 bg-white shadow-sm border-r border-gray-200 overflow-y-auto p-4">
92+
<div className="flex justify-between items-center mb-4">
93+
<h2 className="font-semibold text-gray-800 tracking-wide uppercase text-[17px]">
94+
Saved Surveys
95+
</h2>
96+
{savedSurveys.length > 0 && (
97+
<button
98+
onClick={clearAllSurveys}
99+
className="cursor-pointer text-red-600 hover:text-red-800 transition text-[17px]"
100+
>
101+
Clear All
102+
</button>
103+
)}
104+
</div>
105+
106+
<div className="flex flex-col gap-4 mb-8">
107+
<input
108+
type="text"
109+
placeholder="Enter survey name"
110+
value={currentSurveyName}
111+
onChange={(e) => setCurrentSurveyName(e.target.value)}
112+
className="px-2 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-base"
113+
/>
97114
<button
98-
onClick={clearAllSurveys}
99-
className="text-red-600 hover:text-red-800 transition"
115+
onClick={saveSurvey}
116+
className="cursor-pointer py-3 px-2 bg-blue-600 text-white text-base font-semibold rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
100117
>
101-
Clear All
118+
Save Survey
102119
</button>
103-
)}
104-
</div>
105-
106-
<div className="flex flex-col gap-4 mb-8">
107-
<input
108-
type="text"
109-
placeholder="Enter survey name"
110-
value={currentSurveyName}
111-
onChange={(e) => setCurrentSurveyName(e.target.value)}
112-
className="px-2 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-base"
113-
/>
114-
<button
115-
onClick={saveSurvey}
116-
className="py-3 px-2 bg-blue-600 text-white text-base font-semibold rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
117-
>
118-
Save Survey
119-
</button>
120-
</div>
121-
122-
{savedSurveys.length === 0 ? (
123-
<p className="text-gray-500">No saved surveys yet.</p>
124-
) : (
125-
<div>
126-
{savedSurveys.map((survey, index) => (
127-
<div key={survey.id} className="mb-4">
128-
<div className="flex justify-between items-start">
129-
<div className="flex-1 pr-8">
130-
<h3 className="font-semibold text-gray-900 mb-3 text-base">
131-
{survey.name}
132-
</h3>
133-
<p className="text-gray-500">
134-
Created: {new Date(survey.createdAt).toLocaleDateString()}
135-
</p>
120+
</div>
121+
122+
{savedSurveys.length === 0 ? (
123+
<p className="text-gray-500">No saved surveys yet.</p>
124+
) : (
125+
<div>
126+
{savedSurveys.map((survey, index) => (
127+
<div key={survey.id} className="mb-6">
128+
<div className="flex justify-between items-start">
129+
<div className="flex-1 pr-8">
130+
<h3 className="font-semibold text-gray-900 mb-1 text-base">
131+
{survey.name}
132+
</h3>
133+
<p className="text-gray-500">
134+
Created: {new Date(survey.createdAt).toLocaleDateString()}
135+
</p>
136+
</div>
137+
<div className="flex flex-row items-center gap-3 min-w-[70px]">
138+
<button
139+
onClick={() => loadSurvey(survey)}
140+
className="cursor-pointer text-blue-600 hover:text-blue-800 transition py-1"
141+
>
142+
Load
143+
</button>
144+
<button
145+
onClick={() => deleteSurvey(survey.id)}
146+
className="cursor-pointer text-red-600 hover:text-red-800 transition py-1"
147+
>
148+
Delete
149+
</button>
150+
</div>
136151
</div>
137-
<div className="flex flex-row items-center gap-3 min-w-[70px]">
138-
<button
139-
onClick={() => loadSurvey(survey)}
140-
className="text-blue-600 hover:text-blue-800 transition py-1"
141-
>
142-
Load
143-
</button>
144-
<button
145-
onClick={() => deleteSurvey(survey.id)}
146-
className="text-red-600 hover:text-red-800 transition py-1"
147-
>
148-
Delete
149-
</button>
150152
</div>
151-
</div>
152-
</div>
153-
))}
154-
</div>
155-
)}
156-
</aside>
157-
158-
<main className="flex-1 overflow-y-auto">
159-
<FormBuilderComponent
160-
onSaveSurvey={handleSurveyChange}
161-
json={surveyJson}
162-
/>
163-
</main>
153+
))}
154+
</div>
155+
)}
156+
</aside>
157+
158+
<main className="flex-1 overflow-y-auto">
159+
<FormBuilderComponent
160+
onSaveSurvey={handleSurveyChange}
161+
json={surveyJson}
162+
/>
163+
</main>
164+
</div>
164165
</div>
165-
</div>
166-
);
166+
);
167167
}

0 commit comments

Comments
 (0)