Added bidding page and fixed lint

apps/web/src/app/(application)/_components/auction-card.tsx

@@ -6,18 +6,14 @@ import { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import {
   type CarouselApi,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
 } from "@/components/ui/carousel";
 
 import { Card, CardTitle, CardDescription } from "@/components/ui/card";
 interface ProjectCardProps {
   auction: TAuctionsListItem;
+  link: string;
 }
-const AuctionCard = ({ auction }: ProjectCardProps) => {
+const AuctionCard = ({ auction, link}: ProjectCardProps) => {
   const [api, setApi] = useState<CarouselApi>();
   const [current, setCurrent] = useState(0);
   const [count, setCount] = useState(0);
@@ -45,33 +41,6 @@ const AuctionCard = ({ auction }: ProjectCardProps) => {
 
   return (
     <Card className="p-[20px]">
-      {auction.photos && (
-        <Carousel setApi={setApi} className="relative overflow-hidden rounded-xl">
-          <CarouselContent>
-            {auction.photos.map(({ link, index }) => (
-              <CarouselItem key={link}>
-                <img
-                  src={link}
-                  alt={auction.name}
-                  className="aspect-[2/1.3] object-cover"
-                />
-              </CarouselItem>
-            ))}
-          </CarouselContent>
-
-          <div className="flex h-[20px] items-center justify-center gap-1 bg-sky-950">
-            {auction.photos.map(({ link, index }, i) => (
-              <div
-                className={`h-[8px] w-[8px] cursor-pointer rounded ${i === current - 1 ? "bg-white" : "bg-[#667E8F]"}`}
-                key={link}
-                onClick={() => handleCircleSelected(i)}
-              ></div>
-            ))}
-          </div>
-          <CarouselPrevious className="absolute left-[12px]" />
-          <CarouselNext className="absolute right-[12px]" />
-        </Carousel>
-      )}
       <div className="mt-8 flex flex-col gap-4">
         <CardTitle className="text-3xl">{auction.name}</CardTitle>
         <CardDescription>{auction.description}</CardDescription>
@@ -85,7 +54,7 @@ const AuctionCard = ({ auction }: ProjectCardProps) => {
           <span>12</span>
         </div>
 
-        <Link href={`auction/${auction.id}`}>
+        <Link href={link}>
           <Button>Join bidding session</Button>
         </Link>
       </div>

apps/web/src/app/(application)/_components/auction-list.tsx

@@ -7,7 +7,7 @@ function AuctionList({ auctions }: AuctionListProps) {
   return (
     <ul className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
       {auctions.map((auction, index) => (
-        <AuctionCard auction={auction} key={index}/>
+        <AuctionCard auction={auction} key={index} link={`${auction.id}`}/>
       ))}
     </ul>
   );

apps/web/src/app/(application)/auction/[auctionId]/bidding/page.tsx

@@ -0,0 +1,37 @@
+"use client";
+import AuctionApi, {TAuctionsListItem} from "@/lib/api/auction";
+import {useEffect, useState} from "react";
+import {Button} from "@/components/ui/button";
+export default function SingleAuctionPage({
+                                            params: { auctionId },
+                                          }: {
+  params: { auctionId: string };
+}) {const [auction, setAuction] = useState<TAuctionsListItem>();
+  const [current, setCurrent] = useState(300);
+  useEffect(() => {
+    const getAuction = async () => {
+      const response = await AuctionApi.getAuctionById(auctionId);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
+      setAuction(response.data);
+    }
+    getAuction();
+  }, []);
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  const handleSubmit = (formData) => {
+    const value = +formData.get("Your bid");
+    setCurrent(value);
+  }
+  if (!auction) return <div>Loading...</div>
+  return (
+    <div style={{margin: '30px'}}>
+      <h1 className="text-3xl" style={{paddingBottom: '30px'}}>{auction.name}</h1>
+      <h3 className="font-bold">{`Current bid: ${current}$`}</h3>
+      <form action={handleSubmit} style={{display: 'flex', flexDirection: 'column'}}>
+        <input className="w-[380px] h-[40px]" style={{borderRadius: '8px', border:'1px solid #000'}} name="Your bid"/>
+        <Button className="w-[90px]" style={{ marginTop: '10px' }}> Raise bid</Button>
+      </form>
+    </div>
+  );
+}

apps/web/src/app/(application)/auction/[auctionId]/page.tsx

@@ -7,11 +7,9 @@ export default function SingleAuctionPage({
 }: {
   params: { auctionId: string };
 }) {const [auction, setAuction] = useState();
-  console.log(auctionId);
   useEffect(() => {
     const getAuction = async () => {
       const response = await AuctionApi.getAuctionById(auctionId);
-      console.log(response)
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-expect-error
       setAuction(response.data);
@@ -21,7 +19,7 @@ export default function SingleAuctionPage({
   if (!auction) return <div>Loading...</div>
   return (
     <div>
-      <AuctionCard auction={auction}/>
+      <AuctionCard auction={auction} link={`${auctionId}/bidding`}/>
     </div>
   );
 }

apps/web/src/components/ui/command.tsx

@@ -23,7 +23,7 @@ const Command = React.forwardRef<
 ))
 Command.displayName = CommandPrimitive.displayName
 
-interface CommandDialogProps extends DialogProps {}
+type CommandDialogProps = DialogProps
 
 const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (

apps/web/src/components/ui/textarea.tsx

@@ -2,8 +2,7 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ className, ...props }, ref) => {