From e5cc78d04b321a5497baa1a5e5a8cf2e7b658bcf Mon Sep 17 00:00:00 2001 From: Yan Holtz Date: Thu, 8 Aug 2024 10:10:45 +0200 Subject: [PATCH] k --- component/ExerciseAccordion.tsx | 5 +-- pages/course/svg/main-svg-elements.tsx | 33 +++++++++++++++++-- viz/exercise/SvgOverflowPractice/Graph.tsx | 7 ++++ viz/exercise/SvgOverflowPractice/index.js | 6 ++++ viz/exercise/SvgOverflowPractice/package.json | 28 ++++++++++++++++ viz/exercise/SvgOverflowSolution/Graph.tsx | 7 ++++ viz/exercise/SvgOverflowSolution/index.js | 6 ++++ viz/exercise/SvgOverflowSolution/package.json | 28 ++++++++++++++++ 8 files changed, 116 insertions(+), 4 deletions(-) create mode 100644 viz/exercise/SvgOverflowPractice/Graph.tsx create mode 100644 viz/exercise/SvgOverflowPractice/index.js create mode 100644 viz/exercise/SvgOverflowPractice/package.json create mode 100644 viz/exercise/SvgOverflowSolution/Graph.tsx create mode 100644 viz/exercise/SvgOverflowSolution/index.js create mode 100644 viz/exercise/SvgOverflowSolution/package.json diff --git a/component/ExerciseAccordion.tsx b/component/ExerciseAccordion.tsx index d3edcbd0..0f83b437 100644 --- a/component/ExerciseAccordion.tsx +++ b/component/ExerciseAccordion.tsx @@ -5,7 +5,7 @@ import { AccordionTrigger, } from '@/component/UI/accordion'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/component/UI/tabs'; -import { Eye } from 'lucide-react'; +import { Check, Eye } from 'lucide-react'; import { ReactNode } from 'react'; import { CodeSandbox } from './CodeSandbox'; import { Badge } from './UI/badge'; @@ -34,9 +34,10 @@ export const ExerciseAccordion = ({ exercises }: ExerciseAccordionProps) => { {i + 1} {exercise.title} - + +
diff --git a/pages/course/svg/main-svg-elements.tsx b/pages/course/svg/main-svg-elements.tsx index 2602c7a1..30af428a 100644 --- a/pages/course/svg/main-svg-elements.tsx +++ b/pages/course/svg/main-svg-elements.tsx @@ -233,8 +233,37 @@ export default function Home() {
  • Add some text in the circle
    • ), - practiceSandbox: 'exercise/SvgMultipleCirclesPractice', - solutionSandbox: 'exercise/SvgMultipleCirclesSolution', + practiceSandbox: 'exercise/SvgStackingOrderPractice', + solutionSandbox: 'exercise/SvgStackingOrderSolution', + }, + + { + title: Dealing with SVG overflow, + whyItMatters: ( + <> +

    + Parts of the SVG elements that extend beyond the SVG canvas + boundaries will not be visible. It is called clipping.{' '} +

    +

    + But you can change the overflow css property of + the svg element to visible to show shapes outside + the SVG element boundaries. +

    + + ), + toDo: ( +
      +
    • Draw a big circle at the bottom of the SVG area.
      • +
    • Notice that a part of it is clipped!
      • +
    • + Use the overflow property to avoid clipping and show the full + circle +
      • +
    + ), + practiceSandbox: 'exercise/SvgStackingOrderPractice', + solutionSandbox: 'exercise/SvgStackingOrderSolution', }, ]} /> diff --git a/viz/exercise/SvgOverflowPractice/Graph.tsx b/viz/exercise/SvgOverflowPractice/Graph.tsx new file mode 100644 index 00000000..8fe54f03 --- /dev/null +++ b/viz/exercise/SvgOverflowPractice/Graph.tsx @@ -0,0 +1,7 @@ +export const Graph = () => { + return ( + + {/* TODO */} + + ); +}; diff --git a/viz/exercise/SvgOverflowPractice/index.js b/viz/exercise/SvgOverflowPractice/index.js new file mode 100644 index 00000000..fa564d27 --- /dev/null +++ b/viz/exercise/SvgOverflowPractice/index.js @@ -0,0 +1,6 @@ +// File used to render something in codesandbox only +import ReactDOM from 'react-dom'; +import { Graph } from './Graph'; + +const rootElement = document.getElementById('root'); +ReactDOM.render(, rootElement); diff --git a/viz/exercise/SvgOverflowPractice/package.json b/viz/exercise/SvgOverflowPractice/package.json new file mode 100644 index 00000000..ac08117a --- /dev/null +++ b/viz/exercise/SvgOverflowPractice/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" + ] +} diff --git a/viz/exercise/SvgOverflowSolution/Graph.tsx b/viz/exercise/SvgOverflowSolution/Graph.tsx new file mode 100644 index 00000000..43c04f7d --- /dev/null +++ b/viz/exercise/SvgOverflowSolution/Graph.tsx @@ -0,0 +1,7 @@ +export const Graph = () => { + return ( + + + + ); +}; diff --git a/viz/exercise/SvgOverflowSolution/index.js b/viz/exercise/SvgOverflowSolution/index.js new file mode 100644 index 00000000..fa564d27 --- /dev/null +++ b/viz/exercise/SvgOverflowSolution/index.js @@ -0,0 +1,6 @@ +// File used to render something in codesandbox only +import ReactDOM from 'react-dom'; +import { Graph } from './Graph'; + +const rootElement = document.getElementById('root'); +ReactDOM.render(, rootElement); diff --git a/viz/exercise/SvgOverflowSolution/package.json b/viz/exercise/SvgOverflowSolution/package.json new file mode 100644 index 00000000..ac08117a --- /dev/null +++ b/viz/exercise/SvgOverflowSolution/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" + ] +}