svg rect

pages/course/svg/first-circle.tsx → pages/course/svg/main-svg-elements.tsx

@@ -3,9 +3,9 @@ import TitleAndDescription from '@/component/TitleAndDescription';
 import { LayoutCourse } from '@/component/LayoutCourse';
 import { lessonList } from '@/util/lessonList';
 
-const previousURL = '/course/introduction/initial-setup';
-const currentURL = '/course/introduction/what-is-svg';
-const nextURL = '/course/introduction/what-is-svg';
+const previousURL = '/course/svg/introduction';
+const currentURL = '/course/svg/main-svg-elements';
+const nextURL = undefined;
 const seoDescription = '';
 
 export default function Home() {
@@ -30,13 +30,18 @@ export default function Home() {
         description={
           <>
             <p>
-              Let's create a confortable working environment: let's use Next.js.
+              In the previous lesson we learnt what SVG is and how to draw a
+              circle with it.
+            </p>
+            <p>
+              We'll need other shapes to make graphs: rectangle, text, segment.
+              Let's see how to make them too.
             </p>
           </>
         }
       />
 
-      <h2>Why Next.js?</h2>
+      <h2>Rectangle</h2>
       <p>Explain why react is great?</p>
       <p>Talk about the setup I recommend: next.js + Typescript</p>
       <p>Talk about style management in next.</p>

util/lessonList.tsx

@@ -94,21 +94,22 @@ export const lessonList: Lesson[] = [
     ),
     readTime: 4,
     link: '/course/svg/introduction',
-    status: 'not available',
+    status: 'wip',
     moduleId: 'svg',
   },
   {
-    name: 'Your first circle',
+    name: 'Main SVG elements',
     description: (
       <>
         <p>
-          Let's make the first drawing of this course! Just a little circle.
+          Let's learn how to draw the basic SVG shapes: circle, rectangles,
+          segment and text.
         </p>
       </>
     ),
     readTime: 4,
-    link: '/course/svg/first-circle',
-    status: 'not available',
+    link: '/course/svg/main-svg-elements',
+    status: 'wip',
     moduleId: 'svg',
   },
   {

viz/SvgRectangle/SvgRectangle.tsx

@@ -0,0 +1,7 @@
+export const SvgRectangle = () => {
+  return (
+    <svg width={500} height={300}>
+      <rect x="50" y="50" width="200" height="100" stroke="black" fill="red" />
+    </svg>
+  );
+};

viz/SvgRectangle/index.js

@@ -0,0 +1,6 @@
+// File used to render something in codesandbox only
+import ReactDOM from 'react-dom';
+import { SvgRectangle } from './SvgRectangle';
+
+const rootElement = document.getElementById('root');
+ReactDOM.render(<SvgRectangle />, rootElement);

viz/SvgRectangle/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "pie-chart-basic",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "main": "index.js",
+  "dependencies": {
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.0"
+  },
+  "devDependencies": {
+    "@babel/runtime": "7.13.8",
+    "typescript": "4.1.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}