V0 - Component - add table

[ionescu77]

Use V0

• to get this into code
• html
• react

[ionescu77]

HTML

Here is the HTML because in the project I will add with react.

<!--
// v0 by Vercel.
// https://v0.dev/t/tsvCiUypIaE
-->

<style>:root{--background:0 0% 100%;--foreground:240 10% 3.9%;--card:0 0% 100%;--card-foreground:240 10% 3.9%;--popover:0 0% 100%;--popover-foreground:240 10% 3.9%;--primary:240 5.9% 10%;--primary-foreground:0 0% 98%;--secondary:240 4.8% 95.9%;--secondary-foreground:240 5.9% 10%;--muted:240 4.8% 95.9%;--muted-foreground:240 3.8% 45%;--accent:240 4.8% 95.9%;--accent-foreground:240 5.9% 10%;--destructive:0 72% 51%;--destructive-foreground:0 0% 98%;--border:240 5.9% 90%;--input:240 5.9% 90%;--ring:240 5.9% 10%;--chart-1:173 58% 39%;--chart-2:12 76% 61%;--chart-3:197 37% 24%;--chart-4:43 74% 66%;--chart-5:27 87% 67%;--radius:0.5rem;}img[src="/placeholder.svg"],img[src="/placeholder-user.jpg"]{filter:sepia(.3) hue-rotate(-60deg) saturate(.5) opacity(0.8) }</style>
<style>h1, h2, h3, h4, h5, h6 { font-family: 'Inter', sans-serif; --font-sans-serif: 'Inter'; }
</style>
<style>body { font-family: 'Inter', sans-serif; --font-sans-serif: 'Inter'; }
</style>
<div class="bg-background text-foreground p-8 sm:p-12 md:p-16">
  <div class="max-w-3xl mx-auto">
    <h1 class="text-3xl font-bold mb-8">Most Popular Dishes</h1>
    <div class="bg-card rounded-lg shadow-lg overflow-hidden">
      <table class="w-full table-auto">
        <thead>
          <tr class="bg-muted text-muted-foreground">
            <th class="px-4 py-3 text-left">Progress</th>
            <th class="px-4 py-3 text-right">Orders</th>
            <th class="px-4 py-3 text-left cursor-pointer">
              Dish{" "}
              <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-4 h-4 inline-block ml-2"
              >
                <path d="m21 16-4 4-4-4"></path>
                <path d="M17 20V4"></path>
                <path d="m3 8 4-4 4 4"></path>
                <path d="M7 4v16"></path>
              </svg>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="border-b border-muted/20">
            <td class="px-4 py-3 text-left">
              <div class="w-full bg-muted rounded-full h-2.5">
                <div class="bg-primary h-2.5 rounded-full" style="width: 100%; margin-left: auto;"></div>
              </div>
            </td>
          </tr>
          <tr class="border-b border-muted/20">
            <td class="px-4 py-3 text-left">
              <div class="w-full bg-muted rounded-full h-2.5">
                <div class="bg-primary h-2.5 rounded-full" style="width: 79.9838%; margin-left: auto;"></div>
              </div>
            </td>
          </tr>
          <tr class="border-b border-muted/20">
            <td class="px-4 py-3 text-left">
              <div class="w-full bg-muted rounded-full h-2.5">
                <div class="bg-primary h-2.5 rounded-full" style="width: 70.9887%; margin-left: auto;"></div>
              </div>
            </td>
          </tr>
          <tr class="border-b border-muted/20">
            <td class="px-4 py-3 text-left">
              <div class="w-full bg-muted rounded-full h-2.5">
                <div class="bg-primary h-2.5 rounded-full" style="width: 52.9984%; margin-left: auto;"></div>
              </div>
            </td>
          </tr>
          <tr class="border-b border-muted/20">
            <td class="px-4 py-3 text-left">
              <div class="w-full bg-muted rounded-full h-2.5">
                <div class="bg-primary h-2.5 rounded-full" style="width: 44.0032%; margin-left: auto;"></div>
              </div>
            </td>
          </tr>
          <tr class="border-b border-muted/20">
            <td class="px-4 py-3 text-left">
              <div class="w-full bg-muted rounded-full h-2.5">
                <div class="bg-primary h-2.5 rounded-full" style="width: 35.0081%; margin-left: auto;"></div>
              </div>
            </td>
          </tr>
          <tr class="border-b border-muted/20">
            <td class="px-4 py-3 text-left">
              <div class="w-full bg-muted rounded-full h-2.5">
                <div class="bg-primary h-2.5 rounded-full" style="width: 26.013%; margin-left: auto;"></div>
              </div>
            </td>
          </tr>
          <tr class="border-b border-muted/20">
            <td class="px-4 py-3 text-left">
              <div class="w-full bg-muted rounded-full h-2.5">
                <div class="bg-primary h-2.5 rounded-full" style="width: 17.0178%; margin-left: auto;"></div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

[ionescu77]

Add V0 component

npx v0 add tsvCiUypIaE
Need to install the following packages:
  v0@2.2.5
Ok to proceed? (y) y
Configuration is missing. Run the following command to create a components.json file.