CyberBokeron/Malackathon-frontend
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home básico

Browse Source
This commit is contained in:
Pablo Ferreiro 2024-10-17 15:22:54 +02:00
parent 6350a69b69
commit 574b8f4240
7 changed files with 100 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Solid + TS</title>
<title>CyberBokeron Malackathon</title>
</head>
<body>
<div id="root"></div>

10
package-lock.json generated
View File

@ -10,6 +10,7 @@
"dependencies": {
"@solidjs/router": "^0.14.9",
"bulma": "^1.0.2",
"solid-icons": "^1.1.0",
"solid-js": "^1.9.1"
},
"devDependencies": {
@ -3814,6 +3815,15 @@
"dev": true,
"license": "MIT"
},
"node_modules/solid-icons": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/solid-icons/-/solid-icons-1.1.0.tgz",
"integrity": "sha512-IesTfr/F1ElVwH2E1110s2RPXH4pujKfSs+koT8rwuTAdleO5s26lNSpqJV7D1+QHooJj18mcOiz2PIKs0ic+A==",
"license": "MIT",
"peerDependencies": {
"solid-js": "*"
}
},
"node_modules/solid-js": {
"version": "1.9.2",
"license": "MIT",

1
package.json
View File

@ -11,6 +11,7 @@
"dependencies": {
"@solidjs/router": "^0.14.9",
"bulma": "^1.0.2",
"solid-icons": "^1.1.0",
"solid-js": "^1.9.1"
},
"devDependencies": {

6
src/constants/Videos.ts Normal file
View File

@ -0,0 +1,6 @@
/** Lista de videos (CC) */
const VIDEOS: string[] = [
"https://www.pexels.com/es-es/download/video/13831212/?fps=60.0&h=720&w=1280"
];
export default VIDEOS;

15
src/helpers/Video.ts Normal file
View File

@ -0,0 +1,15 @@
import VIDEOS from "../constants/Videos";
/**
* Clase helper para gestionar los vídeos de fondo
* encontrados en views/Home
*/
export default class Video {
/**
* Elige un vídeo aleatoriamente de la lista
* @returns Vídeo aleatorio
*/
static random(): string {
return VIDEOS[Math.floor(Math.random()*VIDEOS.length)];
}
}

29
src/partials/Navbar.tsx Normal file
View File

@ -0,0 +1,29 @@
import { A } from "@solidjs/router"
/**
* Navegador horizontal, usado en todas las views
*/
function Navbar() {
return (
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<A class="navbar-item" href="/">CyberBokeron</A>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu">
<div class="navbar-start">
{/* TODO: Agregar enlaces */}
</div>
</div>
</nav>
)
}
export default Navbar

39
src/views/Home.tsx
View File

@ -1,6 +1,43 @@
import { FaSolidGlassWaterDroplet } from "solid-icons/fa"
import Navbar from "../partials/Navbar"
function Home() {
return (
<p>Hi</p>
<>
<Navbar />
<section class="hero is-fullheight-with-navbar">
<div class="hero-body">
<div class="container has-text-centered">
<div class="columns is-centered">
<div class="column is-half">
<div class="box">
<div class="columns is-centered is-vcentered is-mobile">
<div class="column is-4">
<figure class="image is-128x128">
<img src="https://bulma.io/assets/images/placeholders/128x128.png" />
</figure>
</div>
<div class="column is-8">
<p class="title">
<span class="icon-text">
<span class="icon">
<FaSolidGlassWaterDroplet />
</span>
<span>Malackathon</span>
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<video src="https://www.pexels.com/es-es/download/video/13831212/?fps=60.0&h=720&w=1280"></video>
</section>
</>
)
}