feat: added ReactFlow-based node graph #11
@@ -1,14 +1,15 @@
|
|||||||
import { Routes, Route } from 'react-router'
|
import { Routes, Route } from 'react-router'
|
||||||
import './App.css'
|
import './App.css'
|
||||||
import TemplatePage from './pages/TemplatePage/Template.tsx'
|
import VisProg from './pages/VisProgPage/VisProg.tsx'
|
||||||
import Home from './pages/Home/Home.tsx'
|
import Home from './pages/Home/Home.tsx'
|
||||||
|
|
||||||
|
|
||||||
function App(){
|
function App(){
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/" element={<Home />} />
|
<Route path="/" element={<Home />} />
|
||||||
<Route path="/Template" element={<TemplatePage />} />
|
<Route path="/visprog" element={<VisProg />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,3 @@
|
|||||||
import { useState } from 'react'
|
|
||||||
import { Link } from 'react-router'
|
import { Link } from 'react-router'
|
||||||
import reactLogo from '../../assets/react.svg'
|
import reactLogo from '../../assets/react.svg'
|
||||||
import viteLogo from '../../assets/vite.svg'
|
import viteLogo from '../../assets/vite.svg'
|
||||||
@@ -29,7 +28,7 @@ function Home() {
|
|||||||
<h1>Vite + React</h1>
|
<h1>Vite + React</h1>
|
||||||
|
|
||||||
<Counter />
|
<Counter />
|
||||||
<Link to = '/Template'>
|
<Link to = '/visprog'>
|
||||||
<button className='movePage right' onClick={() : void => {}}>
|
<button className='movePage right' onClick={() : void => {}}>
|
||||||
Page Cool --{'>'}
|
Page Cool --{'>'}
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
import { useState } from 'react'
|
|
||||||
import { Link } from 'react-router'
|
import { Link } from 'react-router'
|
||||||
import Counter from '../../components/components.tsx'
|
import Counter from '../../components/components.tsx'
|
||||||
import style from './Template.module.css'
|
|
||||||
|
|
||||||
//this is your css file where you can style your buttons and such
|
//this is your css file where you can style your buttons and such
|
||||||
//you can still use css parts from App.css, but also overwrite them
|
//you can still use css parts from App.css, but also overwrite them
|
||||||
|
|||||||
4
src/pages/VisProgPage/VisProg.module.css
Normal file
4
src/pages/VisProgPage/VisProg.module.css
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
button.reset:hover {
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
|
|
||||||
23
src/pages/VisProgPage/VisProg.tsx
Normal file
23
src/pages/VisProgPage/VisProg.tsx
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
import { Link } from 'react-router'
|
||||||
|
import VisProgUI from "../../visualProgrammingUI/VisProgUI.tsx";
|
||||||
|
|
||||||
|
|
||||||
|
//this is your css file where you can style your buttons and such
|
||||||
|
//you can still use css parts from App.css, but also overwrite them
|
||||||
|
|
||||||
|
function VisProgPage() {
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<VisProgUI />
|
||||||
|
<Link to = {"/"}> {/* here you link to the homepage, in App.tsx you can link new pages */}
|
||||||
|
<button className= 'movePage left' onClick={() :void => {}}>
|
||||||
|
Page {'<'}-- Go Home
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default VisProgPage
|
||||||
Reference in New Issue
Block a user