Created
December 9, 2023 04:28
-
-
Save natemoo-re/081bf5ce13047a8d94bd1caab004d7a6 to your computer and use it in GitHub Desktop.
v0 - Doordash Clone
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| // 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 & 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" | |
| > | |
| <</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" | |
| > | |
| > | |
| </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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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> | |
| ) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment