Responsive wine list

vinoa-web/app/globals.css

@@ -8,6 +8,7 @@ body {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
+  @apply font-["Noto"];
 }
 
 h1,
@@ -16,13 +17,21 @@ h3,
 h4,
 h5,
 h6 {
-  @apply text-2xl;
   @apply font-["Noto"];
 }
+p {
+  @apply font-["Julius"];
+}
 
 nav li {
   @apply bg-[#F5F5F5];
   @apply rounded-md;
   @apply px-4;
   @apply py-2;
 }
+
+button {
+  @apply bg-[#F5F5F5];
+  @apply px-3;
+  @apply py-1;
+}

vinoa-web/app/wines/page.tsx

@@ -1,22 +1,12 @@
-import WineListCard from '@/components/WineListCard';
+import WineList from '@/components/WineList';
+import { getTags } from '@/sanity/sanity-utils/tag-utils';
 import { getWines } from '@/sanity/sanity-utils/wine-utils';
 
 export const dynamic = 'force-dynamic';
-
 const WinesPage = async () => {
-  const wines: Wine[] = await getWines();
-  return (
-    <div>
-      <h1>Wine Page</h1>
-      <ul>
-        {wines.map((wine) => (
-          <li key={wine._id}>
-            <WineListCard wine={wine}></WineListCard>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
+  const wines = await getWines();
+  const tags: string[] = await getTags();
+  return <WineList wines={wines} tags={tags} />;
 };
 
 export default WinesPage;

vinoa-web/components/Rating/Rating.tsx

@@ -26,7 +26,7 @@ const Rating = ({ label, rating, maxRating = 5, setRating }: RatingProps) => {
               onClick={handleOnClick}
               key={i}
               className={
-                'text-wine-red z-0 text-xl' +
+                'text-wine-red z-0 text-sm md:text-xl' +
                 (setRating ? ' cursor-pointer' : '')
               }
             />

vinoa-web/components/WineList/WineList.tsx

@@ -0,0 +1,66 @@
+'use client';
+import WineListCard from '../WineListCard';
+import { useState } from 'react';
+
+interface Props {
+  wines: Wine[];
+  tags: string[];
+}
+
+const WineList = ({ wines, tags }: Props) => {
+  const [activeFilter, setActiveFilter] = useState('all');
+  const [winesToShow, setWinesToShow] = useState(wines);
+
+  const handleOnClick = (tag: string) => {
+    setActiveFilter(tag);
+    if (tag === 'all') {
+      setWinesToShow(wines);
+    } else {
+      const filteredWines = wines.filter((wine) => wine.tag == tag);
+      setWinesToShow(filteredWines);
+      setActiveFilter(tag);
+    }
+  };
+  console.log(tags);
+  return (
+    <div>
+      <div>
+        <ul className='flex flex-row justify-center md:justify-start text-xs md:text-base md:pl-8 pb-6'>
+          <li className='m-2'>
+            <button
+              onClick={() => handleOnClick('all')}
+              className={`${'all' == activeFilter && 'ring-2 ring-black '} ${
+                'all' != activeFilter &&
+                'hover:underline-offset-4 hover:underline'
+              } `}
+            >
+              All wines
+            </button>
+          </li>
+          {tags.map((tag, idx) => (
+            <li className='m-2' key={idx}>
+              <button
+                className={`${tag == activeFilter && 'ring-2 ring-black '} ${
+                  tag != activeFilter &&
+                  'hover:underline-offset-4 hover:underline'
+                } `}
+                onClick={() => handleOnClick(tag)}
+              >
+                {tag}
+              </button>
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      <ul className='flex flex-col md:justify-items-center gap-4 items-center lg:grid lg:grid-cols-2 mx-4 lg:mx-8'>
+        {winesToShow.map((wine) => (
+          <li className='w-full md:w-auto lg:w-full mb-6' key={wine._id}>
+            <WineListCard wine={wine}></WineListCard>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+export default WineList;

vinoa-web/components/WineList/index.ts

@@ -0,0 +1,2 @@
+import WineList from './WineList';
+export default WineList;

vinoa-web/components/WineListCard/WineListCard.tsx

@@ -1,34 +1,56 @@
 'use client';
 import Image from 'next/image';
 import Link from 'next/link';
+import Rating from '../Rating';
+import { getReviewsForWine } from '@/sanity/sanity-utils/review-utils';
+import { getAverageRating } from '@/lib/utils/helperFunctions';
+import { use, useEffect, useState } from 'react';
+import user from '@/sanity/schemas/user';
 interface WineProps {
   wine: Wine;
 }
 const WineListCard = ({
-  wine: { name, imageUrl, country, region, smell, taste, body, slug },
+  wine: { name, imageUrl, country, region, smell, taste, body, slug, price },
 }: WineProps) => {
+  const [reviews, setReviews] = useState([] as Review[]);
+
+  useEffect(() => {
+    const fetchReviews = async () => {
+      const reviewsFetched = await getReviewsForWine(slug);
+      setReviews(reviewsFetched);
+    };
+    fetchReviews();
+  }, []);
+
+  const averageRating = getAverageRating(reviews);
   return (
     <Link href={`/wines/${slug}`}>
-      <div className='bg-violet-dark m-4 p-4 flex flex-row'>
-        <div>
+      <div className='h-56 lg:h-60 md:w-[28rem] grid grid-cols-2 bg-grey-highlight rounded-xl p-2 shadow-[4px_4px_4px_rgba(0,0.30,0.30,0.30)]'>
+        <div className='w-28 h-[13rem] lg:h-56 lg:w-36 relative'>
           <Image
-            width={160}
-            height={160}
+            className='rounded-xl'
             alt='Image of a wine bottle'
             src={`${imageUrl}`}
+            layout='fill'
+            objectFit='cover'
           />
-
-          <p>Rating</p>
-          <p>1/5</p>
         </div>
-        <div className='px-5'>
-          <h1 className='text-2xl pb-4'>{name}</h1>
-          <div className='flex flex-col grow h-auto'>
-            <p>Country: {country}</p>
-            <p>Region: {region}</p>
-            <p>Body: {body}</p>
-            <p>Smell: {smell}</p>
-            <p>Taste: {taste}</p>
+        <div className='text-xs md:text-base justify-between flex flex-col gap-4'>
+          <h1 className='text-sm md:text-xl'>{name}</h1>
+          <div className='grid grid-cols-2 text-xs uppercase'>
+            <p className='font-semibold'>Taste</p> <p>{taste}</p>
+            <p className='font-semibold'>Aroma</p> <p>{smell}</p>
+            <p className='font-semibold'>Body</p> <p>{body}</p>
+          </div>
+          <div className='grid grid-cols-2 '>
+            <div className='place-self-start self-end'>
+              <Rating rating={averageRating} />
+            </div>
+            {price && (
+              <div className='place-self-end'>
+                <p className='text-wine-red font-bold'>{price} NOK</p>
+              </div>
+            )}
           </div>
         </div>
       </div>

vinoa-web/sanity/sanity-utils/tag-utils.ts

@@ -0,0 +1,16 @@
+import { groq } from 'next-sanity';
+import client from '../sanityClient';
+
+export const getTags = async () => {
+  const tags = await client.fetch(
+    groq`*[_type == "tag"]{
+      name
+    }`,
+    {},
+    {
+      cache: 'no-store',
+    }
+  );
+  const tagNames = tags.map((tag: any) => tag.name);
+  return tagNames;
+};

vinoa-web/sanity/sanity-utils/wine-utils.ts

@@ -1,8 +1,6 @@
 import { groq } from 'next-sanity';
 import client from '../sanityClient';
 
-
-
 export async function getWines(): Promise<Array<Wine>> {
   const wines: Array<Wine> = await client.fetch(
     groq`*[_type == "wine"]{

vinoa-web/store/wine-store.ts

@@ -0,0 +1,11 @@
+import { create } from 'zustand';
+
+interface WineStore {
+  wines: Wine[];
+  setWines: (wines: Wine[]) => void;
+}
+
+export const useWineStore = create<WineStore>()((set) => ({
+  wines: Array<Wine>(),
+  setWines: (wines) => set({ wines }),
+}));

vinoa-web/tailwind.config.js

@@ -19,7 +19,7 @@ module.exports = {
         'violet-light': '#322E59',
 
         // new colors
-        'grey-highlight': '#F5F5F5',
+        'grey-highlight': '#E6E6E6',
         'wine-violet': '#19082E',
         'wine-red': '#8C0B0F',
       },