mirror of
https://git.rezel.net/LudoTech/traque.git
synced 2026-02-09 10:20:16 +01:00
added a form element and a map
This commit is contained in:
12
traque-front/components/team/loginForm.jsx
Normal file
12
traque-front/components/team/loginForm.jsx
Normal file
@@ -0,0 +1,12 @@
|
||||
import Button from "./utill/button";
|
||||
import TextInput from "./utill/textInput";
|
||||
|
||||
export default function LoginForm() {
|
||||
return (
|
||||
<form className="bg-white shadow-md max-w mx-auto p-5 mx-10 flex flex-col space-y-4">
|
||||
<h1 className="text-2xl font-bold text-center text-gray-700">Connexion équipe</h1>
|
||||
<TextInput placeholder="Code d'équipe" name="team-id" />
|
||||
<Button type="submit">Se connecter</Button>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
23
traque-front/components/team/map.jsx
Normal file
23
traque-front/components/team/map.jsx
Normal file
@@ -0,0 +1,23 @@
|
||||
'use client';
|
||||
import React from 'react'
|
||||
import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet'
|
||||
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css'
|
||||
import "leaflet-defaulticon-compatibility";
|
||||
import "leaflet/dist/leaflet.css";
|
||||
|
||||
export default function LiveMap({...props}) {
|
||||
const position = [51.505, -0.09]
|
||||
return (
|
||||
<MapContainer {...props} center={position} zoom={13} scrollWheelZoom={true}>
|
||||
<TileLayer
|
||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
/>
|
||||
<Marker position={position}>
|
||||
<Popup>
|
||||
A pretty CSS3 popup. <br /> Easily customizable.
|
||||
</Popup>
|
||||
</Marker>
|
||||
</MapContainer>
|
||||
)
|
||||
}
|
||||
5
traque-front/components/team/utill/button.jsx
Normal file
5
traque-front/components/team/utill/button.jsx
Normal file
@@ -0,0 +1,5 @@
|
||||
export default function Button({ children, ...props }) {
|
||||
return (<button {...props} className="bg-blue-600 hover:bg-blue-500 ease-out duration-200 text-white w-full p-4 shadow-sm rounded">
|
||||
{children}
|
||||
</button>)
|
||||
}
|
||||
7
traque-front/components/team/utill/textInput.jsx
Normal file
7
traque-front/components/team/utill/textInput.jsx
Normal file
@@ -0,0 +1,7 @@
|
||||
import React from 'react'
|
||||
|
||||
export default function TextInput({...props}) {
|
||||
return (
|
||||
<input {...props} type="text" className="block w-full p-4 rounded text-center ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600" />
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user