Skip to content

Commit

Permalink
refactor ui for spot details
Browse files Browse the repository at this point in the history
  • Loading branch information
@ajesuscode
ajesuscode committed Oct 16, 2023
1 parent fca5d64 commit 88b413d
Show file tree
Hide file tree
Showing 6 changed files with 87 additions and 100 deletions.
6 changes: 3 additions & 3 deletions src/app/(surfspots)/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ export default async function FavoriteSpotsLayout({
}

return (
<main className="flex flex-col p-4 pt-20 xl:p-24">
<div className="flex flex-row justify-between gap-4 mb-4 items-center sticky top-14 bg-primary h-full z-20 pt-4 w-full">
<main className="flex flex-col p-4 pt-16 xl:p-20 h-full">
<div className="flex flex-row justify-between gap-4 items-center sticky top-14 bg-primary py-4 z-20 w-full">
<div className="flex flex-row gap-4 justify-start ">
{user && (
<Link href="/favorite">
Expand All @@ -51,7 +51,7 @@ export default async function FavoriteSpotsLayout({
</Link>
</div>

<div className="flex flex-row gap-0 justify-start items-center bg-dark/50 rounded-sm p-1">
<div className="flex flex-row gap-0 justify-start items-center bg-dark/50 rounded-sm p-2">
{currentTide?.tide === "rising" ? (
<RisingTideIcon size={20} color="text-light/50" />
) : (
Expand Down
33 changes: 18 additions & 15 deletions src/app/(surfspots)/spots/[spot_id]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import type { Database } from "@/app/lib/database.types";
import Link from "next/link";
import { AddFavoriteIcon, ArrowBackIcon } from "@/app/components/icons/icons";
import AddToFavoriteBtn from "@/app/components/AddToFavoriteBtn";
import SpotInfoAccordeon from "@/app/components/SpotInfoAccordeon";
import SpotInfo from "@/app/components/SpotInfo";
import { PintxoRange } from "@/app/components/PintxoRange";
import { getCurrentPintxoConditions } from "@/app/utils/surfUtils";
import { DateTime } from "luxon";
Expand Down Expand Up @@ -69,14 +69,9 @@ export default async function SpotPage({
return (
<>
{spot && (
<main>
<div className="flex flex-row justify-start gap-4 items-center mb-4 px-4">
<Link href="/spots">
<ArrowBackIcon size={18} color="text-dark" />
</Link>
</div>
<div className="flex flex-col justify-center px-4 gap-2 bg-dark/25 p-2 rounded-sm">
<div className="flex flex-row justify-between items-center py-4">
<>
<div className="flex flex-col justify-start px-4 gap-2 bg-dark/25 rounded-sm md:px-8 md:py-4 p-4 h-full">
<div className="flex flex-row justify-between items-center md:mb-2">
<div className="font-body text-light text-2xl">
{spot.name}
</div>
Expand All @@ -86,20 +81,28 @@ export default async function SpotPage({
user={user}
/>
</div>
<div className="flex flex-row gap-6 justify-start items-center ml-2 lg:m-0 overflow-y-auto my-4">
<div className="flex flex-row gap-6 justify-start items-center lg:m-0 overflow-y-auto my-4">
{currentPintxoCondition.map((pintxo, index) => (
<PintxoRange
key={index}
pintxoCondition={pintxo}
/>
))}
</div>
<div className="flex flex-col justify-start w-ful gap-4">
<SpotConditionsWeek spot={spot} />
<SpotInfoAccordeon spot={spot} />
</div>
</div>
</main>
<div className="font-body text-secondary p-1 rounded-sm text-xs mt-2">
Detailed Weekly Conditions
</div>
<div className="bg-dark/25 p-2">
<SpotConditionsWeek spot={spot} />
</div>
<div className="font-body text-secondary p-1 rounded-sm text-xs mt-2">
Spot Info
</div>
<div className="bg-dark/25 p-2 mb-4">
<SpotInfo spot={spot} />
</div>
</>
)}
</>
);
Expand Down
2 changes: 1 addition & 1 deletion src/app/components/SpotConditionsWeek.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export default function SpotConditionsWeek({
{localDateTimes?.map((item, index) => (
<td
key={index}
className="border border-light/5 text-xs p-1 text-light/50 font-body"
className="border border-light/5 text-xs text-light/50 font-body text-center bg-primeshade"
>
{item.split(" ")[0]}
<br />
Expand Down
64 changes: 64 additions & 0 deletions src/app/components/SpotInfo.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
"use client";
import type { Database } from "../lib/database.types";
type PintxoConditions = Database["public"]["Tables"]["spot_conditions"]["Row"];

export default function SpotInfo({ spot }: { spot: PintxoConditions }) {
return (
<div
className={`flex flex-col justify-start items-center gap-2
`}
>
<div className="font-body text-light text-xs p-4 font-light border-1 border border-light/25 rounded-sm m-2 leading-relaxed">
{spot.about || "N/A"}
</div>
<div className="flex flex-row justify-center mx-2 font-body text-xs text-light gap-2">
<div className=" border-1 border border-light/25 rounded-sm p-4">
Best Surf: {spot.best_surf || "N/A"}
</div>
<div className=" border-1 border border-light/25 rounded-sm p-4">
Board: {spot.board || "N/A"}
</div>
<div className=" border-1 border border-light/25 rounded-sm p-4">
Surfer: {spot.surfer || "N/A"}
</div>
</div>
<div className="flex flex-row justify-center mx-2 font-body text-xs text-light gap-2">
<div className=" border-1 border border-light/25 rounded-sm p-4">
Swell Direction: {spot.swell_direction || "N/A"}
</div>
<div className=" border-1 border border-light/25 rounded-sm p-4">
Swell Handle: {spot.swell_handle || "N/A"}
</div>
<div className=" border-1 border border-light/25 rounded-sm p-4">
Seabed: {spot.seabed || "N/A"}
</div>
</div>
<div className="flex flex-row justify-center mx-2 font-body text-xs text-light gap-2">
<div className=" border-1 border border-light/25 rounded-sm p-4">
Crowd: {spot.crowd || "N/A"}
</div>
<div className=" border-1 border border-light/25 rounded-sm p-4">
Season: {spot.season || "N/A"}
</div>
<div className=" border-1 border border-light/25 rounded-sm p-4">
Wave Type: {spot.wavetype || "N/A"}
</div>
</div>
<div className="flex flex-row justify-center mx-2 font-body text-xs text-light gap-2">
<div className=" border-1 border border-light/25 rounded-sm p-4">
Spot Rating: {spot.spot_rating || "N/A"}
</div>
<div className=" border-1 border border-light/25 rounded-sm p-4">
Water Quality: {spot.water_quality || "N/A"}
</div>
<div className=" border-1 border border-light/25 rounded-sm p-4">
Drive: <a href={spot.drive || "#"}>Directions</a>
</div>
</div>

{/* <div className=" border-1 border border-light/25 rounded-sm p-4">
Windy: <a href={spot.windy || "#"}>Windy Forecast</a>
</div> */}
</div>
);
}
80 changes: 0 additions & 80 deletions src/app/components/SpotInfoAccordeon.tsx
View file

This file was deleted.

2 changes: 1 addition & 1 deletion src/app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export default async function RootLayout({
<div>
<Navbar user={user} />
</div>
<main className="h-full w-screen">{children}</main>
<main className="h-screen w-screen">{children}</main>
</body>
</html>
);
Expand Down

0 comments on commit 88b413d

Please sign in to comment.