Skip to content

Style 03 #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
CHOUMMANIVONGDimitri wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Style 03 #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
f44de44
commit before pull
CHOUMMANIVONGDimitri Nov 25, 2022
9c1d9f8
correction
CHOUMMANIVONGDimitri Nov 25, 2022
6ac3380
ok
CHOUMMANIVONGDimitri Nov 25, 2022
35c8fea
Merge branch 'dev' of github.com:BenBonno/Hackathon_1 into style-03
CHOUMMANIVONGDimitri Nov 25, 2022
3f30492
ok2
CHOUMMANIVONGDimitri Nov 25, 2022
7cafe79
ok3
CHOUMMANIVONGDimitri Nov 25, 2022
8f24d10
ok5
CHOUMMANIVONGDimitri Nov 25, 2022
853c8c1
ok6
CHOUMMANIVONGDimitri Nov 25, 2022
58b9699
ok
CHOUMMANIVONGDimitri Nov 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions hackathonWCS/.env copy.sample
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
VITE_Authorization = "Basic YmZjODJiNDUyYmZkZGZkZmJiMzI1NTk1ZjQ3YTZkZDU6NDNjNmUzYTNlOTExYzBiNTZlMzhkMzQwMGQxNWY5MjU="
2 changes: 1 addition & 1 deletion hackathonWCS/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ function App() {
<header className="w-full fixed top-0 left-0 right-0 z-50">
<Header />
</header>
<main className="">
<main className="bg-c-creamy">
<Routes>
<Route path="/" exact element={<Home />} />
<Route path="/home" exact element={<Home />} />
Expand Down
Binary file added hackathonWCS/src/assets/bg-modal.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added hackathonWCS/src/assets/fonts/HelvetiHand.ttf
View file
Open in desktop
Binary file not shown.
108 changes: 58 additions & 50 deletions hackathonWCS/src/components/CityCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect,useState } from "react";
import React, { useEffect, useState } from "react";
import Rating from "./Rating";
import ThumbLogo from "../assets/trombone.svg";
import Modal from "../components/Modal";
Expand Down Expand Up @@ -278,61 +278,69 @@ const temp = {
],
};

function CityCard({city,parent}) {
console.log(city,parent)
const [DataResult,SetDataResult] = useState()
useEffect(() => {
if(city){
const Country = city.City + "-" + parent.CountryName
const config = {
method: 'get',
url: `https://api.roadgoat.com/api/v2/destinations/${Country.toLowerCase()}`,
headers: {
'Authorization': import.meta.env.VITE_Authorization
},
data : ""
};
axios(config)
function CityCard({ city, parent }) {
console.log(city, parent);
const [DataResult, SetDataResult] = useState();
useEffect(() => {
if (city) {
const Country = city.City + "-" + parent.CountryName;
const config = {
method: "get",
url: `https://api.roadgoat.com/api/v2/destinations/${Country.toLowerCase()}`,
headers: {
Authorization: import.meta.env.VITE_Authorization,
},
data: "",
};
axios(config)
.then(function (response) {
console.log(response.data)
SetDataResult(response.data)
console.log(response.data);
SetDataResult(response.data);
})
.catch(function (error) {
console.log(error);
});
}
}
}, []);
return DataResult&&(
<div className="w-11/12 h-30 bg-white flex border-2 border-c-oasis rounded-2xl">
<section className="w-3/5 relative">
<div className="w-full h-full bg-white p-1 absolute rounded-2xl overflow-hidden">
<div className=" bg-gray-500 w-full h-full"></div>
</div>
<div className="bg-card-cadre bg-center bg-no-repeat w-full h-full bg-[length:100%_100%] absolute rounded-2xl flex justify-center items-center">
<h2 className="text-xl font-bold uppercase text-c-creamy">
{city.City}
</h2>
</div>
</section>
<section className="w-1/3 text-sm h-full mx-auto py-2">
<div className="w-full flex justify-end">
<button className="">
<img className="w-6 h-6" src={ThumbLogo} alt="thumbtack input" />
</button>
</div>
<div>
<Rating rating={DataResult.data.attributes.average_rating} />
</div>
<div className="py-4 font-medium text-gray-800">
<p>{DataResult.data.attributes.name}</p>
<br/>
<p>{DataResult.included[0].attributes.name}</p>
</div>
<div className="w-full flex justify-end">
<Modal city={DataResult} />
</div>
</section>
</div>
return (
DataResult && (
<div className="w-11/12 h-30 bg-white flex border-2 border-c-oasis rounded-2xl">
<section className="w-3/5 relative">
<div className="w-full h-full bg-white p-1 absolute rounded-2xl overflow-hidden">
<div className=" bg-gray-500 w-full h-full">
{/* prend le thumb pour les images \v/ exemple liens en bas \v/ */}
<img
className="w-full my-auto"
src="https://cdn.roadgoat.com/uploads/photo/image/2291/thumb_toa-heftiba-rMjFxuvJlEY-unsplash.jpg"
/>
</div>
</div>
<div className="bg-card-cadre bg-center bg-no-repeat w-full h-full bg-[length:100%_100%] absolute rounded-2xl flex justify-center items-center">
<h2 className="text-xl font-extrabold uppercase text-white drop-shadow-2xl">
{city.City}
</h2>
</div>
</section>
<section className="w-1/3 text-sm h-full mx-auto py-2">
<div className="w-full flex justify-end">
<button className="">
<img className="w-6 h-6" src={ThumbLogo} alt="thumbtack input" />
</button>
</div>
<div>
<Rating rating={DataResult.data.attributes.average_rating} />
</div>
<div className="py-4 font-medium text-gray-800 font-HelvetiHand">
<p>{DataResult.data.attributes.name}</p>
<br />
<p>{DataResult.included[0].attributes.name}</p>
</div>
<div className="w-full flex justify-end">
<Modal city={DataResult} />
</div>
</section>
</div>
)
);
}

Expand Down
2 changes: 1 addition & 1 deletion hackathonWCS/src/components/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import logoWcs from "../assets/wcs.png";
function Footer() {
return (
<div className="flex flex-col justify-end w-full bg-ocean-theme bg-cover bg-top bg-no-repeat">
<section className="flex flex-wrap justify-center text-center text-gray-600 font-bold py-4">
<section className="flex flex-wrap justify-center text-center text-gray-600 font-bold py-4 font-HelvetiHand">
<h2 className="w-full text-3xl text-c-ocean mb-28">Team Dev :</h2>
<p className="w-1/2">Benoit</p>
<p className="w-1/2">Thomas</p>
Expand Down
4 changes: 2 additions & 2 deletions hackathonWCS/src/components/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@ function Header() {
<div className="m-1">
<img className="w-12" src={logoSite} alt="website logo" />
</div>
<h1 className="m-1 text-white font-bold">CheckOo</h1>
<h1 className="m-1 text-white font-bold font-HelvetiHand">CheckOo</h1>
<button
type="button"
className="m-1 py-1.5 px-5 text-sm font-medium text-white focus:outline-none bg-c-oasis rounded-full border-2 hover:bg-btn-oasis-1"
className="font-HelvetiHand m-1 py-1.5 px-5 text-sm font-medium text-white focus:outline-none bg-c-oasis rounded-full border-2 hover:bg-btn-oasis-1"
>
My List
</button>
Expand Down
32 changes: 16 additions & 16 deletions hackathonWCS/src/components/Modal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ function Modal(props) {
return (
<>
<button
className="block text-white bg-c-ocean border-btn-ocean-1 border-4 hover:bg-blue-800 font-medium rounded-full text-sm px-4 py-1.5 text-center"
className=" font-HelvetiHand block text-white bg-c-ocean border-btn-ocean-1 border-4 hover:bg-blue-800 font-medium rounded-full text-sm px-4 py-1.5 text-center"
type="button"
data-modal-toggle="defaultModal"
onClick={handleModal}
Expand All @@ -34,15 +34,15 @@ function Modal(props) {
className="bg-black bg-opacity-50 backdrop-blur-sm overflow-y-auto fixed top-0 left-0 right-0 z-50 w-full h-full justify-center pt-10"
>
<div className="relative">
<div className="absolute z-50 bg-white rounded-lg shadow w-screen">
<div className="flex justify-between items-start p-4 rounded-t border-b dark:border-gray-600">
<p>
<div className="absolute z-50 bg-white rounded-lg shadow w-screen bg-c-ocean">
<div className="flex justify-between items-start p-4 rounded-t">
<p className="font-HelvetiHand font-bold text-gray-800">
{JSON.stringify(props.city.data.attributes.name)}{" "}
{Object.values(props.city.included)[0].attributes.name}
</p>
<button
type="button"
className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
className="text-gray-800 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
data-modal-toggle="defaultModal"
onClick={handleModal}
>
Expand All @@ -61,15 +61,15 @@ function Modal(props) {
</svg>
</button>
</div>
<div className="py-6 px-6">
<ul className="divide-y divide-gray-200 dark:divide-red-700">
<div className="py-6 px-6 bg-modal-theme bg-[length:100%_100%] font-HelvetiHand">
<ul className="divide-y-2 divide-c-oasis">
<li className="pb-3 sm:pb-4">
<div className="flex items-center space-x-4">
<div className="flex-shrink-0">
<Population />
</div>
<div className="flex-1 min-w-0">
<p className="text-sm text-gray-500 dark:text-gray-400">
<p className="text-sm text-gray-700 dark:text-gray-400">
{props.city.data.attributes.population} persons are
living here and will be happy to see you.
</p>
Expand All @@ -82,13 +82,10 @@ function Modal(props) {
<RatingIcon />
</div>
<div className="flex-1 min-w-0">
<p className="text-sm text-gray-500 truncate dark:text-gray-400">
<p className="text-sm text-gray-700 truncate dark:text-gray-400">
Travelers rate this city :{<Rating rating={3} />}
</p>
</div>
<div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">
$3467
</div>
</div>
</li>
<li className="py-3 sm:py-4">
Expand All @@ -97,7 +94,7 @@ function Modal(props) {
<Coronavirus />
</div>
<div className="flex-1 min-w-0">
<p className="text-sm text-gray-500 truncate dark:text-gray-400">
<p className="text-sm text-gray-700 truncate dark:text-gray-400">
{Object.values(
props.city.data.attributes.covid
)[0].value.toFixed(2)}
Expand All @@ -112,7 +109,7 @@ function Modal(props) {
<Safety />
</div>
<div className="flex-1 min-w-0">
<p className="text-sm text-gray-500 truncate dark:text-gray-400">
<p className="text-sm text-gray-700 truncate dark:text-gray-400">
Safety rate of {props.city.data.attributes.short_name}{" "}
:
{
Expand All @@ -134,7 +131,7 @@ function Modal(props) {
<Price />
</div>
<div className="flex-1 min-w-0">
<p className="text-sm text-gray-500 dark:text-gray-400">
<p className="text-sm text-gray-700 dark:text-gray-400">
Budget juged :{" "}
{Object.values(
props.city.data.attributes.budget
Expand All @@ -156,20 +153,22 @@ function Modal(props) {
<Links />
</div>
<div className="flex-1 min-w-0">
<p className="text-sm flex-col flex text-gray-500 truncate dark:text-gray-400">
<p className="text-sm flex-col flex text-gray-700 truncate dark:text-gray-400">
Click me please, don't hesitate :
<br />
<br />
<div className="flex flex-col gap-2">
<a
href={props.city.data.attributes.airbnb_url}
target="_blank"
className="underline"
>
AirBnB
</a>
<a
href={props.city.data.attributes.wikipedia_url}
target="_blank"
className="underline"
>
Le plus beau de tous les Kikis
</a>
Expand All @@ -178,6 +177,7 @@ function Modal(props) {
props.city.data.attributes.kayak_car_rental_url
}
target="_blank"
className="underline"
>
Canoe ?
</a>
Expand Down
Loading