v0 - Doordash Clone

output.html

<!--
// v0 by Vercel.
// https://v0.dev/t/sE11fA14YKy
-->
<div class="bg-white p-4 max-w-[400px]">
  <div class="flex justify-between items-center mb-4">
    <h2 class="text-lg font-semibold">Items</h2>
    <button
      class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-primary/90 h-10 px-4 py-2 bg-[#FF3008] text-white"
    >
      Add more items
    </button>
  </div>
  <div class="mb-4">
    <div class="flex justify-between items-center mb-2">
      <div>
        <h3 class="font-semibold">Party Pack 4-6</h3>
        <p class="text-sm text-gray-600">
          Pork 1 Pound, Brisket 1 Pound, Mac &amp; Cheese Pint, Broccoli
          Casserole Pint,...
        </p>
      </div>
      <div class="flex items-center">
        <button
          class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 border border-gray-300"
        >
          -</button
        ><span class="mx-2">1x</span
        ><button
          class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 border border-gray-300"
        >
          +
        </button>
      </div>
    </div>
    <p class="font-semibold">$60.00</p>
  </div>
  <div class="border-t border-b py-4 my-4">
    <h2 class="text-lg font-semibold mb-4">Most Ordered Items</h2>
    <div class="flex justify-between items-center">
      <div class="flex items-center">
        <div class="mr-4">
          <img
            src="/placeholder.svg"
            alt="Burnt Ends"
            class="w-16 h-16 object-cover rounded-lg"
            width="60"
            height="60"
            style="aspect-ratio: 60/60; object-fit: cover"
          />
        </div>
        <div>
          <p class="font-semibold">Add Burnt Ends</p>
          <p class="text-sm">$10.00</p>
        </div>
      </div>
      <div class="flex items-center">
        <button
          class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 border border-gray-300"
        >
          &lt;</button
        ><button
          class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 border border-gray-300 mx-2"
        >
          &gt;
        </button>
      </div>
    </div>
  </div>
  <div class="mb-4">
    <div class="flex justify-between items-center mb-2">
      <h3 class="font-semibold">Promo Code</h3>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="w-6 h-6 text-gray-600"
      >
        <path d="m9 18 6-6-6-6"></path>
      </svg>
    </div>
    <p class="text-sm text-gray-600">Deals: 30% off, up to $8</p>
  </div>
  <div class="mb-4">
    <div class="flex justify-between mb-2">
      <p>Subtotal</p>
      <p>$60.00</p>
    </div>
    <div class="flex justify-between mb-2">
      <p>Estimated Tax</p>
      <p>$4.29</p>
    </div>
    <div class="flex justify-between">
      <p>Discount</p>
      <p class="text-green-600">-$8.00</p>
    </div>
  </div>
  <div class="mb-4">
    <h3 class="font-semibold mb-2">Tip the staff</h3>
    <div class="flex space-x-2 mb-2">
      <button
        class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-primary/90 h-10 px-4 py-2 bg-gray-200 text-black"
      >
        10%</button
      ><button
        class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-primary/90 h-10 px-4 py-2 bg-gray-200 text-black"
      >
        15%</button
      ><button
        class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-primary/90 h-10 px-4 py-2 bg-gray-200 text-black"
      >
        20%</button
      ><button
        class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-primary/90 h-10 px-4 py-2 bg-gray-200 text-black"
      >
        Other
      </button>
    </div>
    <p class="text-sm text-gray-600">
      100% of the tip goes to the staff at Midwood Smokehouse (Raleigh)
    </p>
  </div>
  <div class="flex justify-between items-center mb-4">
    <p>DoorDash Credits</p>
    <p class="text-green-600">-$5.00</p>
  </div>
  <div class="flex justify-between items-center font-semibold text-lg">
    <p>Total</p>
    <p>$51.29</p>
  </div>
</div>

output.jsx

/**
 * v0 by Vercel.
 * @see https://v0.dev/t/sE11fA14YKy
 */
import { Button } from "@/components/ui/button"

export default function Component() {
  return (
    <div className="bg-white p-4 max-w-[400px]">
      <div className="flex justify-between items-center mb-4">
        <h2 className="text-lg font-semibold">Items</h2>
        <Button className="bg-[#FF3008] text-white" variant="default">
          Add more items
        </Button>
      </div>
      <div className="mb-4">
        <div className="flex justify-between items-center mb-2">
          <div>
            <h3 className="font-semibold">Party Pack 4-6</h3>
            <p className="text-sm text-gray-600">
              Pork 1 Pound, Brisket 1 Pound, Mac & Cheese Pint, Broccoli Casserole Pint,...
            </p>
          </div>
          <div className="flex items-center">
            <Button className="border border-gray-300" variant="outline">
              -
            </Button>
            <span className="mx-2">1x</span>
            <Button className="border border-gray-300" variant="outline">
              +
            </Button>
          </div>
        </div>
        <p className="font-semibold">$60.00</p>
      </div>
      <div className="border-t border-b py-4 my-4">
        <h2 className="text-lg font-semibold mb-4">Most Ordered Items</h2>
        <div className="flex justify-between items-center">
          <div className="flex items-center">
            <div className="mr-4">
              <img
                alt="Burnt Ends"
                className="w-16 h-16 object-cover rounded-lg"
                height="60"
                src="/placeholder.svg"
                style={{
                  aspectRatio: "60/60",
                  objectFit: "cover",
                }}
                width="60"
              />
            </div>
            <div>
              <p className="font-semibold">Add Burnt Ends</p>
              <p className="text-sm">$10.00</p>
            </div>
          </div>
          <div className="flex items-center">
            <Button className="border border-gray-300" variant="outline">
              {`<`}
            </Button>
            <Button className="border border-gray-300 mx-2" variant="outline">
              {`>`}
            </Button>
          </div>
        </div>
      </div>
      <div className="mb-4">
        <div className="flex justify-between items-center mb-2">
          <h3 className="font-semibold">Promo Code</h3>
          <ChevronRightIcon className="w-6 h-6 text-gray-600" />
        </div>
        <p className="text-sm text-gray-600">Deals: 30% off, up to $8</p>
      </div>
      <div className="mb-4">
        <div className="flex justify-between mb-2">
          <p>Subtotal</p>
          <p>$60.00</p>
        </div>
        <div className="flex justify-between mb-2">
          <p>Estimated Tax</p>
          <p>$4.29</p>
        </div>
        <div className="flex justify-between">
          <p>Discount</p>
          <p className="text-green-600">-$8.00</p>
        </div>
      </div>
      <div className="mb-4">
        <h3 className="font-semibold mb-2">Tip the staff</h3>
        <div className="flex space-x-2 mb-2">
          <Button className="bg-gray-200 text-black" variant="default">
            10%
          </Button>
          <Button className="bg-gray-200 text-black" variant="default">
            15%
          </Button>
          <Button className="bg-gray-200 text-black" variant="default">
            20%
          </Button>
          <Button className="bg-gray-200 text-black" variant="default">
            Other
          </Button>
        </div>
        <p className="text-sm text-gray-600">100% of the tip goes to the staff at Midwood Smokehouse (Raleigh)</p>
      </div>
      <div className="flex justify-between items-center mb-4">
        <p>DoorDash Credits</p>
        <p className="text-green-600">-$5.00</p>
      </div>
      <div className="flex justify-between items-center font-semibold text-lg">
        <p>Total</p>
        <p>$51.29</p>
      </div>
    </div>
  )
}

function ChevronRightIcon(props) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="m9 18 6-6-6-6" />
    </svg>
  )
}