diff --git a/diplomas/package-lock.json b/diplomas/package-lock.json
index 0b8b105..d81d08f 100644
--- a/diplomas/package-lock.json
+++ b/diplomas/package-lock.json
@@ -9,6 +9,7 @@
"version": "0.1.0",
"dependencies": {
"@radix-ui/react-dialog": "^1.1.7",
+ "@radix-ui/react-label": "^2.1.4",
"@radix-ui/react-select": "^2.1.7",
"@radix-ui/react-slot": "^1.2.0",
"@radix-ui/react-tabs": "^1.1.9",
@@ -1069,6 +1070,50 @@
}
}
},
+ "node_modules/@radix-ui/react-label": {
+ "version": "2.1.4",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.4.tgz",
+ "integrity": "sha512-wy3dqizZnZVV4ja0FNnUhIWNwWdoldXrneEyUcVtLYDAt8ovGS4ridtMAOGgXBBIfggL4BOveVWsjXDORdGEQg==",
+ "dependencies": {
+ "@radix-ui/react-primitive": "2.1.0"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-label/node_modules/@radix-ui/react-primitive": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.0.tgz",
+ "integrity": "sha512-/J/FhLdK0zVcILOwt5g+dH4KnkonCtkVJsa2G6JmvbbtZfBEI1gMsO3QMjseL4F/SwfAMt1Vc/0XKYKq+xJ1sw==",
+ "dependencies": {
+ "@radix-ui/react-slot": "1.2.0"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
"node_modules/@radix-ui/react-popper": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.3.tgz",
diff --git a/diplomas/package.json b/diplomas/package.json
index 3c4ea33..10e3bdf 100644
--- a/diplomas/package.json
+++ b/diplomas/package.json
@@ -10,6 +10,7 @@
},
"dependencies": {
"@radix-ui/react-dialog": "^1.1.7",
+ "@radix-ui/react-label": "^2.1.4",
"@radix-ui/react-select": "^2.1.7",
"@radix-ui/react-slot": "^1.2.0",
"@radix-ui/react-tabs": "^1.1.9",
diff --git a/diplomas/public/alumnos.jpg b/diplomas/public/alumnos.jpg
new file mode 100644
index 0000000..8f702a7
Binary files /dev/null and b/diplomas/public/alumnos.jpg differ
diff --git a/diplomas/public/cursos.jpg b/diplomas/public/cursos.jpg
new file mode 100644
index 0000000..51f48e9
Binary files /dev/null and b/diplomas/public/cursos.jpg differ
diff --git a/diplomas/src/components/ui/label.jsx b/diplomas/src/components/ui/label.jsx
new file mode 100644
index 0000000..11084e1
--- /dev/null
+++ b/diplomas/src/components/ui/label.jsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+ className,
+ ...props
+}) {
+ return (
+ (<LabelPrimitive.Root
+ data-slot="label"
+ className={cn(
+ "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+ className
+ )}
+ {...props} />)
+ );
+}
+
+export { Label }
diff --git a/diplomas/src/pages/Alumnos.jsx b/diplomas/src/pages/Alumnos.jsx
new file mode 100644
index 0000000..e100973
--- /dev/null
+++ b/diplomas/src/pages/Alumnos.jsx
@@ -0,0 +1,80 @@
+import React from "react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+export default function Alumnos() {
+ return (
+ <div className="flex flex-col items-center justify-center w-full h-screen text-black relative">
+ <Link href="/" className="bg-blue-400 py-2 px-5 absolute top-5 left-5">
+ Volver
+ </Link>
+ <Tabs defaultValue="account" className="w-[800px]">
+ <TabsList className="grid w-full grid-cols-2">
+ <TabsTrigger value="account" className="text-black">
+ Registrar alumno manualmente
+ </TabsTrigger>
+ <TabsTrigger value="password" className="text-black">
+ Registrar alumno por archivo
+ </TabsTrigger>
+ </TabsList>
+ <TabsContent value="account">
+ <Card>
+ <CardHeader>
+ <CardTitle>Alumnos</CardTitle>
+ <CardDescription>
+ Make changes to your account here. Click save when youre done.
+ </CardDescription>
+ </CardHeader>
+ <CardContent className="space-y-2">
+ <div className="space-y-1">
+ <Label htmlFor="name">Name</Label>
+ <Input id="name" defaultValue="Pedro Duarte" />
+ </div>
+ <div className="space-y-1">
+ <Label htmlFor="username">Username</Label>
+ <Input id="username" defaultValue="@peduarte" />
+ </div>
+ </CardContent>
+ <CardFooter>
+ <Button>Save changes</Button>
+ </CardFooter>
+ </Card>
+ </TabsContent>
+ <TabsContent value="password">
+ <Card>
+ <CardHeader>
+ <CardTitle>Alumnos</CardTitle>
+ <CardDescription>
+ Change your password here. After saving, youll be logged out.
+ </CardDescription>
+ </CardHeader>
+ <CardContent className="space-y-2">
+ <div className="space-y-1">
+ <Label htmlFor="current">Current password</Label>
+ <Input id="current" type="password" />
+ </div>
+ <div className="space-y-1">
+ <Label htmlFor="new">New password</Label>
+ <Input id="new" type="password" />
+ </div>
+ </CardContent>
+ <CardFooter>
+ <Button>Save password</Button>
+ </CardFooter>
+ </Card>
+ </TabsContent>
+ </Tabs>
+ </div>
+ );
+}
diff --git a/diplomas/src/pages/Cursos.jsx b/diplomas/src/pages/Cursos.jsx
new file mode 100644
index 0000000..38e3294
--- /dev/null
+++ b/diplomas/src/pages/Cursos.jsx
@@ -0,0 +1,80 @@
+import React from "react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+export default function Cursos() {
+ return (
+ <div className="flex flex-col items-center justify-center w-full h-screen text-black relative">
+ <Link href="/" className="bg-blue-400 py-2 px-5 absolute top-5 left-5">
+ Volver
+ </Link>
+ <Tabs defaultValue="account" className="w-[800px]">
+ <TabsList className="grid w-full grid-cols-2">
+ <TabsTrigger value="account" className="text-black">
+ Registrar curso manualmente
+ </TabsTrigger>
+ <TabsTrigger value="password" className="text-black">
+ Registrar curso por archivo
+ </TabsTrigger>
+ </TabsList>
+ <TabsContent value="account">
+ <Card>
+ <CardHeader>
+ <CardTitle>Cursos</CardTitle>
+ <CardDescription>
+ Make changes to your account here. Click save when youre done.
+ </CardDescription>
+ </CardHeader>
+ <CardContent className="space-y-2">
+ <div className="space-y-1">
+ <Label htmlFor="name">Name</Label>
+ <Input id="name" defaultValue="Pedro Duarte" />
+ </div>
+ <div className="space-y-1">
+ <Label htmlFor="username">Username</Label>
+ <Input id="username" defaultValue="@peduarte" />
+ </div>
+ </CardContent>
+ <CardFooter>
+ <Button>Save changes</Button>
+ </CardFooter>
+ </Card>
+ </TabsContent>
+ <TabsContent value="password">
+ <Card>
+ <CardHeader>
+ <CardTitle>Cursos</CardTitle>
+ <CardDescription>
+ Change your password here. After saving, youll be logged out.
+ </CardDescription>
+ </CardHeader>
+ <CardContent className="space-y-2">
+ <div className="space-y-1">
+ <Label htmlFor="current">Current password</Label>
+ <Input id="current" type="password" />
+ </div>
+ <div className="space-y-1">
+ <Label htmlFor="new">New password</Label>
+ <Input id="new" type="password" />
+ </div>
+ </CardContent>
+ <CardFooter>
+ <Button>Save password</Button>
+ </CardFooter>
+ </Card>
+ </TabsContent>
+ </Tabs>
+ </div>
+ );
+}
diff --git a/diplomas/src/pages/index.js b/diplomas/src/pages/index.js
index 19486b9..b7db1e3 100644
--- a/diplomas/src/pages/index.js
+++ b/diplomas/src/pages/index.js
@@ -1,115 +1,37 @@
-import Image from "next/image";
-import { Geist, Geist_Mono } from "next/font/google";
-
-const geistSans = Geist({
- variable: "--font-geist-sans",
- subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
- variable: "--font-geist-mono",
- subsets: ["latin"],
-});
+import Link from "next/link";
export default function Home() {
return (
- <div
- className={`${geistSans.className} ${geistMono.className} grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]`}
- >
- <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
- <Image
- className="dark:invert"
- src="/next.svg"
- alt="Next.js logo"
- width={180}
- height={38}
- priority
- />
- <ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
- <li className="mb-2 tracking-[-.01em]">
- Get started by editing{" "}
- <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
- src/pages/index.js
- </code>
- .
- </li>
- <li className="tracking-[-.01em]">
- Save and see your changes instantly.
- </li>
- </ol>
- <div className="flex gap-4 items-center flex-col sm:flex-row">
- <a
- className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
- href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
- target="_blank"
- rel="noopener noreferrer"
- >
- <Image
- className="dark:invert"
- src="/vercel.svg"
- alt="Vercel logomark"
- width={20}
- height={20}
- />
- Deploy now
- </a>
- <a
- className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
- href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
- target="_blank"
- rel="noopener noreferrer"
- >
- Read our docs
- </a>
- </div>
- </main>
- <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
- <a
- className="flex items-center gap-2 hover:underline hover:underline-offset-4"
- href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
- target="_blank"
- rel="noopener noreferrer"
- >
- <Image
- aria-hidden
- src="/file.svg"
- alt="File icon"
- width={16}
- height={16}
- />
- Learn
- </a>
- <a
- className="flex items-center gap-2 hover:underline hover:underline-offset-4"
- href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
- target="_blank"
- rel="noopener noreferrer"
- >
- <Image
- aria-hidden
- src="/window.svg"
- alt="Window icon"
- width={16}
- height={16}
- />
- Examples
- </a>
- <a
- className="flex items-center gap-2 hover:underline hover:underline-offset-4"
- href="https://nextjs.org?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
- target="_blank"
- rel="noopener noreferrer"
- >
- <Image
- aria-hidden
- src="/globe.svg"
- alt="Globe icon"
- width={16}
- height={16}
- />
- Go to nextjs.org →
- </a>
- </footer>
+ <div className="flex flex-col items-center justify-center w-full h-screen text-black">
+ <h1 className="text-3xl font-bold mb-4">¿Qué quieres hacer?</h1>
+ <div className="flex">
+ <Link href="/Alumnos">
+ <div className="flex flex-col items-center">
+ <div
+ style={{
+ backgroundImage: "url('/alumnos.jpg')",
+ backgroundRepeat: "no-repeat",
+ backgroundSize: "cover",
+ }}
+ className="h-60 w-96 border rounded-3 m-5"
+ ></div>
+ <h1>Dar de Alumnos</h1>
+ </div>
+ </Link>
+ <Link href="/Cursos">
+ <div className="flex flex-col items-center">
+ <div
+ style={{
+ backgroundImage: "url('/cursos.jpg')",
+ backgroundRepeat: "no-repeat",
+ backgroundSize: "cover",
+ }}
+ className="h-60 w-96 border rounded-3 m-5"
+ ></div>
+ <h1>Dar de Cursos</h1>
+ </div>
+ </Link>
+ </div>
</div>
);
}
diff --git a/diplomas/src/styles/globals.css b/diplomas/src/styles/globals.css
index 30c517f..98b111d 100644
--- a/diplomas/src/styles/globals.css
+++ b/diplomas/src/styles/globals.css
@@ -80,7 +80,6 @@
@media (prefers-color-scheme: dark) {
:root {
- --background: #0a0a0a;
--foreground: #ededed;
}
}