Merge pull request #54 from odeta939/newWineCards

Added WineTastingCard
odeta939 · Oct 20, 2023 · b1dbf55 · b1dbf55
2 parents ea2a833 + 772024e
commit b1dbf55
Show file tree

Hide file tree

Showing 17 changed files with 84 additions and 21 deletions.
diff --git a/vinoa-web/app/globals.css b/vinoa-web/app/globals.css
@@ -5,7 +5,9 @@
 body {
   @apply bg-white;
   @apply text-black;
-  min-height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
 }
 
 nav li {

diff --git a/vinoa-web/app/layout.tsx b/vinoa-web/app/layout.tsx
@@ -17,7 +17,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang='en'>
-      <body className={inter.className}>
+      <body className={`${inter.className}`}>
         <SessionProviders>
           <Navigation></Navigation>
           {children}

diff --git a/vinoa-web/app/monthsWine/page.tsx b/vinoa-web/app/monthsWine/page.tsx
@@ -1,4 +1,4 @@
-import WineCard from '@/components/WineCard';
+import WineListCard from '@/components/WineListCard';
 import { getCurrentMonthAsRange } from '@/lib/utils/helperFunctions';
 import { getThisMonthsWines } from '@/sanity/sanity-utils/wine-utils';
 
@@ -13,7 +13,7 @@ const MonthsWinePage = async () => {
       <ul>
         {wines.map((wine) => (
           <li key={wine._id}>
-            <WineCard wine={wine}></WineCard>
+            <WineListCard wine={wine}></WineListCard>
           </li>
         ))}
       </ul>

diff --git a/vinoa-web/app/page.tsx b/vinoa-web/app/page.tsx
@@ -1,16 +1,27 @@
 import WineCarousel from '@/components/WineCarousel';
 import WineButton from '@/components/WineButton';
-import { getWines } from '@/sanity/sanity-utils/wine-utils';
+import { getThisMonthsWines, getWines } from '@/sanity/sanity-utils/wine-utils';
+import WineTastingCard from '@/components/WineTastingCard';
+import { getCurrentMonthAsRange } from '@/lib/utils/helperFunctions';
 
 export const dynamic = 'force-dynamic';
 
 export default async function Home() {
-  const wines = await getWines();
+  const date = getCurrentMonthAsRange();
+
+  const thisMonthsWines: Wine[] = await getThisMonthsWines(date.from, date.to);
 
   return (
-    <main className='min-h-screen flex flex-col items-stretch'>
-      <WineButton />
-      <WineCarousel wines={wines} />
+    <main className='flex flex-grow justify-center items-center'>
+      <div className='flex flex-row  flex-grow justify-around'>
+        {thisMonthsWines.map((wine, index) => {
+          return (
+            <div className='' key={index}>
+              <WineTastingCard wine={wine} />
+            </div>
+          );
+        })}
+      </div>
     </main>
   );
 }
diff --git a/vinoa-web/app/wines/page.tsx b/vinoa-web/app/wines/page.tsx
@@ -1,4 +1,4 @@
-import WineCard from '@/components/WineCard';
+import WineListCard from '@/components/WineListCard';
 import { getWines } from '@/sanity/sanity-utils/wine-utils';
 
 export const dynamic = 'force-dynamic';
@@ -11,7 +11,7 @@ const WinesPage = async () => {
       <ul>
         {wines.map((wine) => (
           <li key={wine._id}>
-            <WineCard wine={wine}></WineCard>
+            <WineListCard wine={wine}></WineListCard>
           </li>
         ))}
       </ul>

diff --git a/vinoa-web/components/Navigation/Navigation.tsx b/vinoa-web/components/Navigation/Navigation.tsx
@@ -6,9 +6,11 @@ import { usePathname } from 'next/navigation';
 const Navigation = () => {
   const path = usePathname();
   return (
+
     <nav className='max-w-screen w-full fixed bottom-0 md:static md:top-0 p-4 bg-white'>
       <div className='grid md:grid-cols-2  text-l'>
         <div className='md:block items-center hidden'>
+
           <Link href={'/'}>
             <Logo color='#800020' />
           </Link>

diff --git a/vinoa-web/components/UserProfile/UserProfile.tsx b/vinoa-web/components/UserProfile/UserProfile.tsx
@@ -1,6 +1,9 @@
 'use client';
 import ProfileLogo from '@/lib/assets/ProfileLogo';
-import WineCard from '../WineCard';
+
+import { BsPencilFill } from 'react-icons/bs';
+import WineCard from '../WineListCard';
+
 import { useEffect } from 'react';
 import { useSanityUserStore, useUserStore } from '@/store/store';
 import LoginButton from '../LoginButton';

diff --git a/vinoa-web/components/WineCard/index.ts b/vinoa-web/components/WineCard/index.ts
diff --git a/vinoa-web/components/WineCarousel/WineCarousel.tsx b/vinoa-web/components/WineCarousel/WineCarousel.tsx
@@ -3,7 +3,7 @@ import { AiOutlineArrowRight, AiOutlineArrowLeft } from 'react-icons/ai';
 import 'swiper/css';
 import { Keyboard, Navigation } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import WineCard from '@/components/WineCard/WineCard';
+import WineListCard from '@/components/WineListCard/WineListCard';
 
 interface WineProps {
   wines: Wine[];
@@ -38,7 +38,7 @@ const WineCarousel = ({ wines }: WineProps) => {
         >
           {wines.map((wine) => (
             <SwiperSlide key={wine._id}>
-              <WineCard wine={wine} />
+              <WineListCard wine={wine} />
             </SwiperSlide>
           ))}
         </Swiper>

diff --git a/vinoa-web/components/WineCard/WineCard.tsx → .../components/WineListCard/WineListCard.tsx b/vinoa-web/components/WineCard/WineCard.tsx → .../components/WineListCard/WineListCard.tsx
@@ -4,8 +4,8 @@ import Link from 'next/link';
 interface WineProps {
   wine: Wine;
 }
-const WineCard = ({
-  wine: { name, imageUrl, country, region, colour, smell, taste, slug },
+const WineListCard = ({
+  wine: { name, imageUrl, country, region, smell, taste, body, slug },
 }: WineProps) => {
   return (
     <Link href={`/wines/${slug}`}>
@@ -26,7 +26,7 @@ const WineCard = ({
           <div className='flex flex-col grow h-auto'>
             <p>Country: {country}</p>
             <p>Region: {region}</p>
-            <p>Color: {colour}</p>
+            <p>Body: {body}</p>
             <p>Smell: {smell}</p>
             <p>Taste: {taste}</p>
           </div>
@@ -35,4 +35,4 @@ const WineCard = ({
     </Link>
   );
 };
-export default WineCard;
+export default WineListCard;
diff --git a/vinoa-web/components/WineListCard/index.ts b/vinoa-web/components/WineListCard/index.ts
@@ -0,0 +1,2 @@
+import WineListCard from './WineListCard';
+export default WineListCard;
diff --git a/vinoa-web/components/WineTastingCard/WineTastingCard.tsx b/vinoa-web/components/WineTastingCard/WineTastingCard.tsx
@@ -0,0 +1,34 @@
+import Image from 'next/image';
+
+interface WineTastingProps {
+  wine: Wine;
+}
+export default function WineTastingCard({
+  wine: { name, imageUrl, tag, price, taste, smell, body },
+}: WineTastingProps) {
+  return (
+    <div className='w-64 h-[390px] xl:w-80 xl:h-[460px] p-4 px-5 bg-neutral-50 rounded-3xl shadow-[4px_4px_4px_rgba(0,0,0,0.45)]'>
+      <div className='w-28 h-48 xl:w-32 xl:h-56 mx-auto relative'>
+        <Image
+          className='rounded-3xl'
+          alt='Image of a wine bottle'
+          src={`${imageUrl}`}
+          layout='fill'
+          objectFit='cover'
+        />
+      </div>
+      <div className='bg-neutral-50 w-16 h-7 rounded-3xl text-center ring-black ring-1 text-black text-sm mt-4 xl:mt-6 py-1'>
+        {tag}
+      </div>
+      <div className='text-black mt-3'>
+        <p className='text-xl xl:text-2xl'>{name}</p>
+        <p className='text-wine-red text-base xl:text-lg'>{price} NOK</p>
+        <div className='grid grid-cols-2 gap-x-10 gap-[2px] xl:text-base text-sm'>
+          <p>Taste</p> <p>{taste}</p>
+          <p>Aroma</p> <p>{smell}</p>
+          <p>Body</p> <p>{body}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/vinoa-web/components/WineTastingCard/index.ts b/vinoa-web/components/WineTastingCard/index.ts
@@ -0,0 +1,2 @@
+import WineTastingCard from "./WineTastingCard";
+export default WineTastingCard;
diff --git a/vinoa-web/sanity/sanity-utils/wine-utils.ts b/vinoa-web/sanity/sanity-utils/wine-utils.ts
@@ -14,6 +14,7 @@ export async function getWines(): Promise<Array<Wine>> {
     region,
     smell,
     taste,
+    body,
     price,
     "tag": *[_id == ^.tag._ref][0].name,
   }`,
@@ -37,6 +38,7 @@ export async function getWine(slug: string): Promise<Wine> {
     region,
     smell,
     taste,
+    body,
     price,
     "tag": *[_id == ^.tag._ref][0].name,
   }`,
@@ -60,6 +62,7 @@ export async function getThisMonthsWines(dateFrom: string, dateTo: string) {
     region,
     smell,
     taste,
+    body,
     price,
     "tag": *[_id == ^.tag._ref][0].name,
   }`,

diff --git a/vinoa-web/sanity/schemas/wine.ts b/vinoa-web/sanity/schemas/wine.ts
@@ -76,6 +76,11 @@ export default defineType({
       title: 'Taste of Wine',
       type: 'string',
     }),
+    defineField({
+      name: 'body',
+      title: 'Body of Wine',
+      type: 'string',
+    }),
     defineField({
       name: 'users',
       title: 'People who tasted this wine',

diff --git a/vinoa-web/tailwind.config.js b/vinoa-web/tailwind.config.js
@@ -18,6 +18,7 @@ module.exports = {
         "violet-dark": "#232044",
         "violet-darker": "#1B183B",
         "violet-light": "#322E59",
+        "wine-red": "#8C0B0F",
       },
     },
   },

diff --git a/vinoa-web/types/Wine.ts b/vinoa-web/types/Wine.ts
@@ -11,6 +11,6 @@ type Wine = {
   region: string;
   smell: string;
   taste: string;
-  colour: string;
+  body:string;
   users: User[];
 };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import WineListCard from './WineListCard';
		export default WineListCard;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import WineTastingCard from "./WineTastingCard";
		export default WineTastingCard;
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,6 +14,7 @@ export async function getWines(): Promise<Array<Wine>> { @@
         region,
         smell,
         taste,
+        body,
         price,
         "tag": *[_id == ^.tag._ref][0].name,
       }`,
@@ Expand All / @@ -37,6 +38,7 @@ export async function getWine(slug: string): Promise<Wine> { @@
         region,
         smell,
         taste,
+        body,
         price,
         "tag": *[_id == ^.tag._ref][0].name,
       }`,
@@ Expand All @@
         region,
         smell,
         taste,
+        body,
         price,
         "tag": *[_id == ^.tag._ref][0].name,
       }`,
@@ Expand Down @@