Skip to content

Commit b1aeec4

Browse files
JaneSjsJaneSjs
committed
Fix UI rendering and styles and survey creation dates
1 parent 9c2c4ba commit b1aeec4

File tree

7 files changed

+83
-137
lines changed

7 files changed

+83
-137
lines changed

‎blogpost-apps/nextjs-form-builder/src/app/globals.css

Lines changed: 0 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1 @@
11
@import "tailwindcss";
2-
3-
:root {
4-
--background: #ffffff;
5-
--foreground: #171717;
6-
}
7-
8-
@media (prefers-color-scheme: dark) {
9-
:root {
10-
--background: #0a0a0a;
11-
--foreground: #ededed;
12-
}
13-
}
14-
15-
html,
16-
body {
17-
max-width: 100vw;
18-
overflow-x: hidden;
19-
}
20-
21-
body {
22-
color: var(--foreground);
23-
background: var(--background);
24-
font-family: Arial, Helvetica, sans-serif;
25-
-webkit-font-smoothing: antialiased;
26-
-moz-osx-font-smoothing: grayscale;
27-
}
28-
29-
* {
30-
box-sizing: border-box;
31-
padding: 0;
32-
margin: 0;
33-
}
34-
35-
a {
36-
color: inherit;
37-
text-decoration: none;
38-
}
39-
40-
@media (prefers-color-scheme: dark) {
41-
html {
42-
color-scheme: dark;
43-
}
44-
}

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

Lines changed: 73 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -86,93 +86,82 @@ export default function Home() {
8686
}
8787

8888
return (
89-
<div className="min-h-screen bg-gray-50">
90-
{/* Header */}
91-
<header className="bg-white shadow-sm border-b border-gray-200 py-6">
92-
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
93-
<div className="flex flex-col sm:flex-row sm:justify-between sm:items-center space-y-4 sm:space-y-0">
94-
<h1 className="text-2xl font-bold text-gray-900">SurveyJS Form Builder</h1>
95-
<div className="flex items-center gap-x-6">
96-
<input
97-
type="text"
98-
placeholder="Enter survey name..."
99-
value={currentSurveyName}
100-
onChange={(e) => setCurrentSurveyName(e.target.value)}
101-
className="px-5 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 w-64"
102-
/>
103-
<button
104-
onClick={saveSurvey}
105-
className="px-10 py-5 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
106-
>
107-
Save Survey
108-
</button>
109-
</div>
110-
</div>
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 && (
97+
<button
98+
onClick={clearAllSurveys}
99+
className="text-red-600 hover:text-red-800 transition"
100+
>
101+
Clear All
102+
</button>
103+
)}
111104
</div>
112-
</header>
113-
114-
<div className="flex h-[calc(100vh-6rem)]">
115-
{/* Sidebar */}
116-
<aside className="w-80 bg-white shadow-sm border-r border-gray-200 overflow-y-auto">
117-
<div className="p-6">
118-
<div className="flex justify-between items-center mb-12 px-2">
119-
<h2 className="text-lg font-semibold text-gray-900">Saved Surveys</h2>
120-
{savedSurveys.length > 0 && (
121-
<button
122-
onClick={clearAllSurveys}
123-
className="text-sm text-red-600 hover:text-red-800 transition"
124-
>
125-
Clear All
126-
</button>
127-
)}
128-
</div>
129-
130-
{savedSurveys.length === 0 ? (
131-
<p className="text-gray-500 text-sm">No saved surveys yet.</p>
132-
) : (
133-
<div className="space-y-6">
134-
{savedSurveys.map((survey) => (
135-
<div
136-
key={survey.id}
137-
className="p-5 bg-gray-50 rounded-lg hover:bg-gray-100 transition"
138-
>
139-
<div className="flex justify-between items-start gap-6">
140-
<div className="flex-1">
141-
<h3 className="font-medium text-gray-900 mb-2">{survey.name}</h3>
142-
<p className="text-sm text-gray-500">
143-
Created: {new Date(survey.createdAt).toLocaleDateString()}
144-
</p>
145-
</div>
146-
<div className="flex gap-4 ml-2">
147-
<button
148-
onClick={() => loadSurvey(survey)}
149-
className="text-blue-600 hover:text-blue-800 text-sm transition"
150-
>
151-
Load
152-
</button>
153-
<button
154-
onClick={() => deleteSurvey(survey.id)}
155-
className="text-red-600 hover:text-red-800 text-sm transition"
156-
>
157-
Delete
158-
</button>
159-
</div>
160-
</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>
161136
</div>
162-
))}
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>
150+
</div>
151+
</div>
163152
</div>
164-
)}
153+
))}
165154
</div>
166-
</aside>
167-
168-
{/* Main Content */}
169-
<main className="flex-1 p-8">
170-
<FormBuilderComponent
171-
onSaveSurvey={handleSurveyChange}
172-
json={surveyJson}
173-
/>
174-
</main>
175-
</div>
155+
)}
156+
</aside>
157+
158+
<main className="flex-1 overflow-y-auto">
159+
<FormBuilderComponent
160+
onSaveSurvey={handleSurveyChange}
161+
json={surveyJson}
162+
/>
163+
</main>
176164
</div>
177-
);
165+
</div>
166+
);
178167
}

‎blogpost-apps/nextjs-form-builder/src/formSamples/courseEvaluationForm.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -164,8 +164,8 @@ const courseEvaluationSurvey = {
164164
id: 'courseEvaluationForm',
165165
name: "Course Evaluation Form",
166166
json: courseEvaluationForm,
167-
createdAt: "2023-01-01T00:00:00.000Z",
168-
updatedAt: "2023-01-01T00:00:00.000Z"
167+
createdAt: "2025-01-01T00:00:00.000Z",
168+
updatedAt: "2025-01-01T00:00:00.000Z"
169169
};
170170

171171
export default courseEvaluationSurvey;

‎blogpost-apps/nextjs-form-builder/src/formSamples/healthAndWellnessAssessment.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -221,8 +221,8 @@ const healthWellnessForm = {
221221
id: 'healthWellnessForm',
222222
name: "Health and Wellness Survey",
223223
json: healthWellnessFormJson,
224-
createdAt: "2023-01-01T00:00:00.000Z",
225-
updatedAt: "2023-01-01T00:00:00.000Z"
224+
createdAt: "2025-01-01T00:00:00.000Z",
225+
updatedAt: "2025-01-01T00:00:00.000Z"
226226
};
227227

228228
export default healthWellnessForm;

‎blogpost-apps/nextjs-form-builder/src/formSamples/marketResearchForm.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -137,8 +137,8 @@ const marketResearchForm = {
137137
id: 'marketResearchForm',
138138
name: "Market Research Form",
139139
json: marketResearchFormJson,
140-
createdAt: "2023-01-01T00:00:00.000Z",
141-
updatedAt: "2023-01-01T00:00:00.000Z"
140+
createdAt: "2025-01-01T00:00:00.000Z",
141+
updatedAt: "2025-01-01T00:00:00.000Z"
142142
};
143143

144144
export default marketResearchForm;

‎blogpost-apps/nextjs-form-builder/src/formSamples/volunteerSignUpForm.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -133,8 +133,8 @@ const volunteerSignUpForm = {
133133
id: 'volunteerSignUpForm',
134134
name: "Volunteer Sign Up Form",
135135
json: volunteerSignUpFormJson,
136-
createdAt: "2023-01-01T00:00:00.000Z",
137-
updatedAt: "2023-01-01T00:00:00.000Z"
136+
createdAt: "2025-01-01T00:00:00.000Z",
137+
updatedAt: "2025-01-01T00:00:00.000Z"
138138
};
139139

140140
export default volunteerSignUpForm;

‎blogpost-apps/nextjs-form-builder/src/formSamples/websiteUsabilityForm.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -179,8 +179,8 @@ const websiteUsabilityForm = {
179179
id: 'websiteUsabilityForm',
180180
name: "Website Usability Form",
181181
json: websiteUsabilityFormJson,
182-
createdAt: "2023-01-01T00:00:00.000Z",
183-
updatedAt: "2023-01-01T00:00:00.000Z"
182+
createdAt: "2025-01-01T00:00:00.000Z",
183+
updatedAt: "2025-01-01T00:00:00.000Z"
184184
};
185185

186186
export default websiteUsabilityForm;

0 commit comments

Comments
 (0)