Scientific

1
import React, { createContext, useEffect, useState } from "react";
2
import {
3
  Tailwind,
4
  CSS,
5
  Latex,
6
  PageBreak,
7
  Footnote,
8
  Markdown,
9
} from "@fileforge/react-print";
10
11
export 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
293
console.log("Hello, World!");
294
console.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>;