estructurando preentrega

.gitignore

@@ -0,0 +1,21 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+ "recommendations": ["astro-build.astro-vscode"],
+ "unwantedRecommendations": []
+}

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "command": "./node_modules/.bin/astro dev",
+ "name": "Development server",
+ "request": "launch",
+ "type": "node-terminal"
+ }
+ ]
+}

README.md

@@ -0,0 +1,47 @@
+# Astro Starter Kit: Minimal
+
+```sh
+npm create astro@latest -- --template minimal
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/minimal)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/minimal/devcontainer.json)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```text
+/
+├── public/
+├── src/
+│ └── pages/
+│ └── index.astro
+└── package.json
+```
+
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+
+Any static assets, like images, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command | Action |
+| :------------------------ | :----------------------------------------------- |
+| `npm install` | Installs dependencies |
+| `npm run dev` | Starts local dev server at `localhost:4321` |
+| `npm run build` | Build your production site to `./dist/` |
+| `npm run preview` | Preview your build locally, before deploying |
+| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

astro.config.mjs

@@ -0,0 +1,9 @@
+import { defineConfig } from 'astro/config';
+import tailwind from "@astrojs/tailwind";
+
+import svelte from "@astrojs/svelte";
+
+// https://astro.build/config
+export default defineConfig({
+ integrations: [tailwind(), svelte()]
+});

package.json

@@ -0,0 +1,21 @@
+{
+ "name": "tfc-provisional",
+ "type": "module",
+ "version": "0.0.1",
+ "scripts": {
+ "dev": "astro dev",
+ "start": "astro dev",
+ "build": "astro check && astro build",
+ "preview": "astro preview",
+ "astro": "astro"
+ },
+ "dependencies": {
+ "@astrojs/check": "^0.5.10",
+ "@astrojs/svelte": "^5.2.0",
+ "@astrojs/tailwind": "^5.1.0",
+ "astro": "^4.5.9",
+ "svelte": "^4.2.12",
+ "tailwindcss": "^3.4.1",
+ "typescript": "^5.4.3"
+ }
+}

src/components/Div_href_big.astro

@@ -0,0 +1,25 @@
+---
+// Div-href-big.astro
+interface Props {
+ title: string
+ href: string
+}
+const {title,href} = Astro.props;
+---
+<a href={href}>
+ <div class="header flex justify-center items-center">
+ <p>{title}</p>
+ </div>
+</a>
+
+
+<style>
+ div {
+ width: 200px;
+ height: 200px;
+ background-color: white;
+ box-shadow: 0 0 5px rgba(255, 105, 180, 0.5);
+ padding: 1rem;
+ text-shadow: 1px 1px 2px black;
+ }
+</style>

src/components/Footer.astro

@@ -0,0 +1,13 @@
+---
+const year = new Date().getFullYear();
+const cr = 'all rights reserved';
+---
+<footer>
+ <div class="container">
+ <div class="row">
+ <div class="col-md-12">
+ <p>&copy; { cr }, { year }</p>
+ </div>
+ </div>
+ </div>
+</footer>

src/components/Header.astro

@@ -0,0 +1,15 @@
+---
+// Header.astro
+import Headernav from '@/components/Headernav.astro';
+
+---
+
+<header>
+ <Headernav fields={['Inicio','Agenda','Tienda','Sobre','FAQ']} />
+</header>
+
+<style>
+ header {
+ background-color: var(--header-bg-color);
+ }
+</style>

src/components/Headernav.astro

@@ -0,0 +1,48 @@
+---
+interface Props {
+ fields: string[];
+}
+const { fields } = Astro.props;
+/* Navigation component that receives a list of fields and renders a list of links*/
+---
+ <nav>
+ <ul>
+ {fields.map((field: string) => (
+ <li>
+ <a href=
+ {`/${
+ field === 'Inicio' 
+ ? 'index' 
+ : field.toLowerCase()
+ }`}>
+ {field}
+ </a>
+ </li>
+ ))}
+ </ul>
+ </nav>
+
+<style>
+ nav {
+ display: flex;
+ justify-content: center;
+ margin: 0;
+ height: 100%;
+ border: 1px solid #333;
+ }
+ ul {
+ display: flex;
+ list-style: none;
+ padding: 0;
+ }
+ li {
+ margin: 0 1rem;
+ }
+ a {
+ text-decoration: none;
+ color: #333;
+ }
+ a:hover {
+ color: #0070f3;
+ }
+</style>

src/components/getdate.svelte

@@ -0,0 +1,28 @@
+<script>
+ export let field;
+ const now = new Date();
+ const time = now.toLocaleTimeString();
+ const year = now.getFullYear();
+ const month = now.getMonth() + 1; // Los meses en JavaScript empiezan en 0
+ const day = now.getDate();
+ let displayField;
+ 
+ switch(field) {
+ case 'Time':
+ displayField = time;
+ break;
+ case 'Year':
+ displayField = year;
+ break;
+ case 'Month':
+ displayField = month;
+ break;
+ case 'Day':
+ displayField = day;
+ break;
+ default:
+ displayField = 'Field not recognized';
+ }
+ </script>
+
+{displayField}

src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

src/layouts/Layout.astro

@@ -0,0 +1,96 @@
+---
+import { ViewTransitions } from "astro:transitions";
+interface Props {
+ // TypeScript interface for props
+ title: string;
+}
+
+import Header from "@/components/Header.astro";
+import Footer from "@/sections/Footer.astro";
+const { title } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="description" content="Astro description" />
+ <meta name="viewport" content="width=device-width" />
+ <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+ <meta name="generator" content={Astro.generator} />
+ <title>{title}</title>
+ <ViewTransitions />
+ </head>
+ <body>
+ <div id="App" class="relative h-screen p-2 gap-2"> <!-- grid actúa como container -->
+ <Header class="[grid-area:header]"/>
+ <main class="[grid-area:main]">
+ <slot />
+ </main>
+ <Footer class="[grid-area:footer]"/>
+ </div>
+ </body>
+ <style>
+ #App {
+ display: grid;
+ grid-template-areas:
+ "header"
+ "main"
+ "footer";
+ grid-template-rows: 100px auto 100px;
+ width: 100%;
+ }
+ main {
+ background-color: antiquewhite;
+ }
+ </style>
+
+ <style is:global>
+ :root {
+ --accent: 136, 58, 234;
+ --accent-light: 224, 204, 250;
+ --accent-dark: 49, 10, 101;
+ --accent-gradient: linear-gradient(
+ 45deg,
+ rgb(var(--accent)),
+ rgb(var(--accent-light)) 30%,
+ white 60%
+ );
+ --header-bg-color: #ffd1f2;
+ --header-dark-color: #ffa4e5;
+ --header_nav-color: 255, 155, 227, 0.22;
+ --global-black: #000000;
+ --global-white: #ffffff;
+ }
+
+ body::-webkit-scrollbar {
+ width: 1em;
+ }
+
+ body::-webkit-scrollbar-track {
+ box-shadow: inset 0 0 6px red;
+ }
+
+ body::-webkit-scrollbar-thumb {
+ background-color: darkgrey;
+ outline: 1px solid slategrey;
+ }
+
+ html {
+ font-family: system-ui, sans-serif;
+ background-size: 224px;
+ }
+
+ code {
+ font-family:
+ Menlo,
+ Monaco,
+ Lucida Console,
+ Liberation Mono,
+ DejaVu Sans Mono,
+ Bitstream Vera Sans Mono,
+ Courier New,
+ monospace;
+ }
+ </style>
+</html>

src/pages/academia.astro

@@ -0,0 +1,25 @@
+---
+title: "academia"
+import Layout from '@/layouts/Layout.astro';
+
+---
+
+<Layout title='academia'>
+ <astro-slot slot="header">
+ <!-- Aquí puedes agregar el contenido de tu encabezado -->
+ </astro-slot>
+ <astro-slot slot="sidebar">
+ <!-- Aquí puedes agregar el contenido de tu barra lateral -->
+ </astro-slot>
+ <astro-slot slot="content">
+ <div>
+ <!-- Aquí puedes agregar el contenido principal de tu página de peluquería -->
+ <h1>Bienvenido a nuestra peluquería</h1>
+ <p>¡Ofrecemos una amplia gama de servicios de peluquería para hombres y mujeres!</p>
+ <!-- Agrega más contenido aquí -->
+ </div>
+ </astro-slot>
+ <astro-slot slot="footer">
+ <!-- Aquí puedes agregar el contenido de tu pie de página -->
+ </astro-slot>
+</Layout>