ADD: Default HomePage.tsx;

Signed-off-by: HarmonySkull <[email protected]>

Author: Davicho-Dev

src/assets/index.ts

@@ -0,0 +1 @@
+export { ReactLogo, ViteLogo } from './svg'

src/assets/svg/index.ts

@@ -0,0 +1,2 @@
+export { default as ReactLogo } from './react.svg'
+export { default as ViteLogo } from './vite.svg'

src/assets/react.svg renamed to src/assets/svg/react.svg

@@ -1,20 +1,20 @@
 import { useState } from 'react'
 
-import reactLogo from './assets/react.svg'
+import { ReactLogo, ViteLogo } from '../../assets'
 
 const HomePage = () => {
 	const [count, setCount] = useState(0)
 
 	return (
-		<div className='App'>
-			<div>
+		<section className='App'>
+			<header>
 				<a href='https://vitejs.dev' target='_blank' rel='noreferrer'>
-					<img src='/vite.svg' className='logo' alt='Vite logo' />
+					<img src={ViteLogo} className='logo' alt='Vite logo' />
 				</a>
 				<a href='https://reactjs.org' target='_blank' rel='noreferrer'>
-					<img src={reactLogo} className='logo react' alt='React logo' />
+					<img src={ReactLogo} className='logo react' alt='React logo' />
 				</a>
-			</div>
+			</header>
 			<h1>Vite + React</h1>
 			<div className='card'>
 				<button onClick={() => setCount((count) => count + 1)}>
@@ -27,7 +27,7 @@ const HomePage = () => {
 			<p className='read-the-docs'>
 				Click on the Vite and React logos to learn more
 			</p>
-		</div>
+		</section>
 	)
 }
 

src/assets/svg/vite.svg

@@ -2,10 +2,12 @@ import { StrictMode } from 'react'
 
 import ReactDOM from 'react-dom/client'
 
+import CommonRouter from './router/CommonRouter'
+
 import './styles/globals.sass'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <StrictMode>
-
-  </StrictMode>
+	<StrictMode>
+		<CommonRouter />
+	</StrictMode>
 )

src/components/pages/HomePage.tsx

@@ -1,12 +1,72 @@
 @import "./base/_tailwind.sass"
 
+// Generic styles
+
+\:root
+	font-family: Inter, Avenir, Helvetica, Arial, sans-serif
+	font-size: 16px
+	line-height: 24px
+	font-weight: 400
+	color-scheme: light dark
+	color: rgba(255, 255, 255, 0.87)
+	background-color: #242424
+	font-synthesis: none
+	text-rendering: optimizeLegibility
+	-webkit-font-smoothing: antialiased
+	-moz-osx-font-smoothing: grayscale
+	-webkit-text-size-adjust: 100%
+
+a
+	font-weight: 500
+	color: #646cff
+	text-decoration: inherit
+
+a:hover
+	color: #535bf2
+
+body
+	margin: 0
+	display: flex
+	place-items: center
+	min-width: 320px
+	min-height: 100vh
+
+h1
+	font-size: 3.2em
+	line-height: 1.1
+
+button
+	border-radius: 8px
+	border: 1px solid transparent
+	padding: 0.6em 1.2em
+	font-size: 1em
+	font-weight: 500
+	font-family: inherit
+	background-color: #1a1a1a
+	cursor: pointer
+	transition: border-color 0.25s
+
+button:hover
+	border-color: #646cff
+
+button:focus,
+button:focus-visible
+	outline: 4px auto -webkit-focus-ring-color
+
+@media (prefers-color-scheme: light)
+	\:root
+		color: #213547
+		background-color: #ffffff
+
+a:hover
+	color: #747bff
+
 #root
 	max-width: 1280px
 	margin: 0 auto
 	padding: 2rem
 	text-align: center
 
-
 .logo
 	height: 6em
 	padding: 1.5em
@@ -18,26 +78,19 @@
 .logo.react:hover
 	filter: drop-shadow(0 0 2em #61dafbaa)
 
-
 @keyframes logo-spin
 	from
 		transform: rotate(0deg)
 
 	to
 		transform: rotate(360deg)
 
-
-
 @media (prefers-reduced-motion: no-preference)
 a:nth-of-type(2) .logo
 	animation: logo-spin infinite 20s linear
 
-
-
 .card
 	padding: 2em
 
-
 .read-the-docs
 	color: #888
-