1import React, { createContext, useEffect, useState } from "react";
2import {
3 Tailwind,
4 CSS,
5 Latex,
6 PageBreak,
7 Footnote,
8 Markdown,
9} from "@fileforge/react-print";
10
11export const SectionComponent = ({ title, content, isSection }) => {
12 return (
13 <div>
14 {isSection ? (
15 <h2 className="text-md italic text-center uppercase">{title}</h2>
16 ) : (
17 <h3 className="text-sm italic">{title}</h3>
18 )}
19 {/* The content should have an indent on the first sentence, not after*/}
20 <div className="text-xs text-justify">{content}</div>
21 </div>
22 );
23};
24
25<React.Fragment>
26 {/* A CSS snippet to define the page size, margins, fonts, etc.
27 It also enforce the space between line to be small*/}
28 <CSS>
29 {String.raw`
30 @page {
31 size: A4;
32 margin: 2cm;
33 }
34
35 body {
36 line-height: 1.1;
37 }
38
39 `}
40 </CSS>
41
42 <Tailwind>
43 {/* A Header with the title of the research in large and bold, then the author name, the supervisor and the institute. All centered */}
44 <div className="text-center">
45 <h1 className="text-2xl font-bold">Title of the Research Report</h1>
46 <p className="text-base">Author: Name of the Author</p>
47 <p className="text-base">Supervisor: Name of the Supervisor</p>
48 <p className="text-base">Institute: Name of the Institute</p>
49 </div>
50
51 <br />
52
53 {/* A Tailwind component to define the layout of the page */}
54
55 {/* 2 columns */}
56 <div className="columns-2 gap-8" style={{ columnFill: "auto" }}>
57 {/* Abstract*/}
58 {/* <Abstract
59 text="Lorem ipsum dolor sit amet [1], consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
60 /> */}
61
62 <p className="text-justify text-xs font-bold italic">
63 Abstract -- Lorem ipsum dolor sit amet [1], consectetur adipiscing elit.
64 Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
65 enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
66 aliquip ex ea commodo consequat.
67 </p>
68
69 <br />
70
71 {/* An Introduction Section with no content*/}
72 <SectionComponent
73 title="1. Introduction"
74 content={null}
75 isSection={true}
76 />
77
78 {/* A sub section with a title and a content */}
79 <SectionComponent
80 title="A. Sub Section"
81 content={
82 <p className="text-justify text-xs">
83 Lorem ipsum dolor sit amet [2], consectetur adipiscing elit. Sed do
84 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
85 ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
86 aliquip ex ea commodo consequat. Duis aute irure dolor in
87 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
88 pariatur.{" "}
89 <Footnote style={{ float: "footnote page" }}>Footnote 1</Footnote>
90 </p>
91 }
92 isSection={false}
93 />
94
95 <br />
96
97 {/* A sub section with a title and a content with a formula */}
98 <SectionComponent
99 title="B. Sub section"
100 content={
101 <React.Fragment>
102 <p>
103 Lorem ipsum dolor sit amet [3], consectetur adipiscing elit. Sed
104 do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
105 enim ad minim veniam, quis nostrud exercitation ullamco laboris
106 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
107 reprehenderit in voluptate velit esse cillum dolore eu fugiat
108 nulla pariatur.
109 </p>
110 <br />
111
112 {/* add the latex component to display a formula */}
113 <div className="text-center">
114 <Latex>
115 {String.raw`f(x) = \int_{-\infty}^\infty \hat f(\xi) e^{2 \pi i \xi x} d\xi (1)`}
116 </Latex>
117 </div>
118 </React.Fragment>
119 }
120 isSection={false}
121 />
122
123 <br />
124
125 {/* A sub section with a title and content, and an image */}
126 <SectionComponent
127 title="C. Sub section"
128 content={
129 <React.Fragment>
130 <p>
131 Lorem ipsum dolor sit amet [4], consectetur adipiscing elit. Sed
132 do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
133 enim ad minim veniam, quis nostrud exercitation ullamco laboris
134 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
135 reprehenderit in voluptate velit esse cillum dolore eu fugiat
136 nulla pariatur.
137 </p>
138 {/* Add an image, with a caption display under */}
139 <div className="text-center">
140 {/* <img src="varianceexplaine.png" alt="Image" /> */}
141 <img
142 src="https://machinelearningmastery.com/wp-content/uploads/2018/12/Example-of-Train-and-Validation-Learning-Curves-Showing-A-Good-Fit.png"
143 alt="Image"
144 />
145 <p className="text-xs italic text-center">
146 Figure 1: Caption of the image
147 </p>
148 </div>
149 </React.Fragment>
150 }
151 isSection={false}
152 />
153
154 <br />
155
156 {/* A section Data with */}
157 <SectionComponent title="2. Data" content={null} isSection={true} />
158
159 {/* A sub section with a title and a content */}
160 <SectionComponent
161 title="A. Sub section"
162 content={
163 <p>
164 Lorem ipsum dolor sit amet [5], consectetur adipiscing elit. Sed do
165 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
166 ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
167 aliquip ex ea commodo consequat. Duis aute irure dolor in
168 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
169 pariatur.
170 </p>
171 }
172 isSection={false}
173 />
174
175 <br />
176
177 {/* A sub section with a title and a content, and a table in with 3 columns and 6 raws, the table should be centered and it must have 1 horizontal the first raw and the second one and then verticle line between each column */}
178 <SectionComponent
179 title="B. Sub section"
180 content={
181 <React.Fragment>
182 <p>
183 Lorem ipsum dolor sit amet [6], consectetur adipiscing elit. Sed
184 do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
185 enim ad minim veniam, quis nostrud exercitation ullamco laboris
186 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
187 reprehenderit in voluptate velit esse cillum dolore eu fugiat
188 nulla pariatur.
189 </p>
190 <br />
191 <table className="table-auto mx-auto w-full border-collapse">
192 <thead>
193 <tr>
194 <th className="border border-black px-1 py-1 text-center font-medium font-bold">
195 {" "}
196 Header 1{" "}
197 </th>
198 <th className="border border-black px-1 py-1 text-center font-medium font-bold">
199 {" "}
200 Header 2{" "}
201 </th>
202 <th className="border border-black px-1 py-1 text-center font-medium font-bold">
203 {" "}
204 Header 3{" "}
205 </th>
206 </tr>
207 </thead>
208 <tbody>
209 <tr>
210 <td className="border border-black px-1 py-1 text-center">
211 {" "}
212 Data 1{" "}
213 </td>
214 <td className="border border-black px-1 py-1 text-center">
215 {" "}
216 Data 2{" "}
217 </td>
218 <td className="border border-black px-1 py-1 text-center">
219 {" "}
220 Data 3{" "}
221 </td>
222 </tr>
223 <tr>
224 <td className="border border-black px-1 py-1 text-center">
225 {" "}
226 Data 4{" "}
227 </td>
228 <td className="border border-black px-1 py-1 text-center">
229 {" "}
230 Data 5{" "}
231 </td>
232 <td className="border border-black px-1 py-1 text-center">
233 {" "}
234 Data 6{" "}
235 </td>
236 </tr>
237 </tbody>
238 </table>
239 {/* caption to the table */}
240 <p className="text-xs italic text-center">
241 Table 1: Caption of the table
242 </p>
243 </React.Fragment>
244 }
245 isSection={false}
246 />
247
248 <br />
249
250 {/* A Section Methodology */}
251 <SectionComponent
252 title="3. Methodology"
253 content={null}
254 isSection={true}
255 />
256
257 {/* A sub section with a title and a content */}
258 <SectionComponent
259 title="A. Sub section"
260 content={
261 <p>
262 Lorem ipsum dolor sit amet [7], consectetur adipiscing elit. Sed do
263 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
264 ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
265 aliquip ex ea commodo consequat. Duis aute irure dolor in
266 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
267 pariatur.
268 </p>
269 }
270 isSection={false}
271 />
272
273 <br />
274
275 {/* A sub section with a title and a content, and a code snippet */}
276 <SectionComponent
277 title="B. Sub section"
278 content={
279 <React.Fragment>
280 <p>
281 Lorem ipsum dolor sit amet [8], consectetur adipiscing elit. Sed
282 do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
283 enim ad minim veniam, quis nostrud exercitation ullamco laboris
284 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
285 reprehenderit in voluptate velit esse cillum dolore eu fugiat
286 nulla pariatur.
287 </p>
288 <br />
289 <pre className="bg-gray-100 p-2">
290 <code>
291 {String.raw`function helloWorld() {
292
293console.log("Hello, World!");
294console.log("This is a code snippet");
295}`}
296 </code>
297 </pre>
298 </React.Fragment>
299 }
300 isSection={false}
301 />
302
303 <br />
304 <br />
305
306 {/* A Section Results */}
307 <SectionComponent title="4. Results" content={null} isSection={true} />
308
309 {/* A sub section with a title and a content */}
310 <SectionComponent
311 title="A. Sub section"
312 content={
313 <p>
314 Lorem ipsum dolor sit amet [9], consectetur adipiscing elit. Sed do
315 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
316 ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
317 aliquip ex ea commodo consequat. Duis aute irure dolor in
318 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
319 pariatur.
320 </p>
321 }
322 isSection={false}
323 />
324
325 <br />
326
327 {/* A sub section with a title and a content, and a list */}
328 <SectionComponent
329 title="B. Sub section"
330 content={
331 <React.Fragment>
332 <p>
333 Lorem ipsum dolor sit amet [10], consectetur adipiscing elit. Sed
334 do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
335 enim ad minim veniam, quis nostrud exercitation ullamco laboris
336 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
337 reprehenderit in voluptate velit esse cillum dolore eu fugiat
338 nulla pariatur.
339 </p>
340 <br />
341 <ul className="list-disc list-inside">
342 <li> Item 1 </li>
343 <li> Item 2 </li>
344 <li> Item 3 </li>
345 </ul>
346 </React.Fragment>
347 }
348 isSection={false}
349 />
350
351 <br />
352
353 {/* A Section Conclusion */}
354 <SectionComponent title="5. Conclusion" content={null} isSection={true} />
355
356 {/* A sub section with a title and a content */}
357 <SectionComponent
358 title="A. Sub section"
359 content={
360 <p>
361 Lorem ipsum dolor sit amet{" "}
362 <Footnote children={undefined} style={{ float: "footnote page" }}>
363 {" "}
364 <Markdown
365 style={{ color: "blue" }}
366 >{`[The BEST open-source library](https://github.com/OnedocLabs/react-print-pdf)`}</Markdown>{" "}
367 </Footnote>
368 , consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut
369 labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
370 exercitation ullamco laboris nisi ut aliquip ex ea commodo
371 consequat. Duis aute irure dolor in reprehenderit in voluptate velit
372 esse cillum dolore eu fugiat nulla pariatur.
373 </p>
374 }
375 isSection={false}
376 />
377
378 <br />
379
380 {/* A sub section with a title and a content, and a formula */}
381 <SectionComponent
382 title="B. Sub section"
383 content={
384 <React.Fragment>
385 <p>
386 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
387 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
388 enim ad minim veniam, quis nostrud exercitation ullamco laboris
389 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
390 reprehenderit in voluptate velit esse cillum dolore eu fugiat
391 nulla pariatur.
392 </p>
393 <br />
394 <div className="text-center">
395 <Latex>
396 {String.raw`f(x) = \int_{-\infty}^\infty \hat f(\xi) e^{2 \pi i \xi x} d\xi (1)`}
397 </Latex>
398 </div>
399 </React.Fragment>
400 }
401 isSection={false}
402 />
403
404 <br />
405
406 {/* A Section References where te content is 10 references starting with [1] and ending with [10] */}
407 <SectionComponent
408 title="References"
409 content={
410 <React.Fragment>
411 <p className="italic">
412 {" "}
413 [1] Reference 1 Author Name, Article Title, Journal, Year
414 </p>
415 <p className="italic">
416 {" "}
417 [2] Reference 2 Author Name, Article Title, Journal, Year
418 </p>
419 <p className="italic">
420 {" "}
421 [3] Reference 3 Author Name, Article Title, Journal, Year
422 </p>
423 <p className="italic">
424 {" "}
425 [4] Reference 4 Author Name, Article Title, Journal, Year
426 </p>
427 <p className="italic">
428 {" "}
429 [5] Reference 5 Author Name, Article Title, Journal, Year
430 </p>
431 <p className="italic">
432 {" "}
433 [6] Reference 6 Author Name, Article Title, Journal, Year
434 </p>
435 <p className="italic">
436 {" "}
437 [7] Reference 7 Author Name, Article Title, Journal, Year
438 </p>
439 <p className="italic">
440 {" "}
441 [8] Reference 8 Author Name, Article Title, Journal, Year
442 </p>
443 <p className="italic">
444 {" "}
445 [9] Reference 9 Author Name, Article Title, Journal, Year
446 </p>
447 <p className="italic">
448 {" "}
449 [10] Reference 10 Author Name, Article Title, Journal, Year
450 </p>
451 </React.Fragment>
452 }
453 isSection={true}
454 />
455
456 {/* Page Break */}
457 <PageBreak />
458 </div>
459 </Tailwind>
460</React.Fragment>;