pepperplus/pepperplus-ui
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: basic home page

Browse Source 
Created a basic home page with links, a header with a link to home, some basic reusable CSS classes.

ref: N25B-38
This commit is contained in:
Twirre Meulenbelt
2025-10-08 15:03:44 +02:00
parent f889fad732
commit 46cc5a087d
9 changed files with 148 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/pages/Home/Home.module.css
View File

@@ -1,6 +1,24 @@
.read_the_docs {
color: #888;
}
.card {
padding: 2em;
}
.links {
display: flex;
flex-direction: column;
gap: 1em;
align-items: center;
}
.gap-xl {
gap: 2rem;
}
.links {
display: flex;
flex-direction: column;
gap: 1em;
}

47
src/pages/Home/Home.tsx
View File

@@ -1,48 +1,19 @@
import { useState } from 'react'
import { Link } from 'react-router'
import reactLogo from '../../assets/react.svg'
import viteLogo from '../../assets/vite.svg'
import pepperLogo from '../../assets/pepper_transp2_small.svg'
import style from './Home.module.css'
import Counter from '../../components/components.tsx'
import styles from './Home.module.css'
function Home() {
return (
<>
<div>
<div className = "logoPepperScaling">
<a href="https://git.science.uu.nl/ics/sp/2025/n25b" target="_blank">
<img src={pepperLogo} className="logopepper" alt="Pepper logo" />
</a>
</div>
<a href="https://vite.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
<div className={`flex-col ${styles.gapXl}`}>
<div className="logoPepperScaling">
<a href="https://git.science.uu.nl/ics/sp/2025/n25b" target="_blank">
<img src={pepperLogo} className="logopepper" alt="Pepper logo" />
</a>
</div>
<h1>Vite + React</h1>
<Counter />
<Link to = '/Template'>
<button className='movePage right' onClick={() : void => {}}>
Page Cool --{'>'}
</button>
</Link>
<p>
Edit <code>src/App.tsx</code> and save to test HMR
</p>
<p className={style.read_the_docs}>
Click on the Vite and React logos to learn more
</p>
</>
<div className={styles.links}>
<Link to={"/template"}>Template →</Link>
</div>
</div>
)
}

4
src/pages/TemplatePage/Template.module.css
View File

@@ -1,4 +0,0 @@
button.reset:hover {
background-color: yellow;
}

13
src/pages/TemplatePage/Template.tsx
View File

@@ -1,22 +1,9 @@
import { useState } from 'react'
import { Link } from 'react-router'
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
//you can still use css parts from App.css, but also overwrite them
function TemplatePage() {
return (
<>
<Counter />
<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>
</>
)
}