import {
    Table,
    TableBody,
    TableCaption,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
  } from "@/components/ui/table"
import { Button } from "@/components/ui/button";
  
export default function MainTable() {
    const checkmark = "\u2705";
    const xmark = "\u274C";

    const success = "text-green-500";


    return (
      <div className="min-w-[350px] mt-4 px-2">
        <Table className="">
            <TableHeader>
                <TableRow>
                    <TableHead className="w-[150px]">Name</TableHead>
                    <TableHead className="text-right">Availability</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody >
                <TableRow className="hover:bg-white">
                    <TableCell className={`font-medium ${success}`}>name.io</TableCell>
                    <TableCell className="text-right text-green-500">
                        <Button className="w-[75px] bg-green-500 hover:bg-white hover:text-green-500 border">Click</Button>
                    </TableCell>
                </TableRow>
                <TableRow>
                    <TableCell className={`font-medium ${success}`}>name 1</TableCell>
                    <TableCell className="text-right text-green-500">{checkmark}</TableCell>
                </TableRow>
                <TableRow>
                    <TableCell className={`font-medium ${success}`}>name 2</TableCell>
                    <TableCell className="text-right text-green-500">{checkmark}</TableCell>
                </TableRow>
            </TableBody>
        </Table>
      </div>
    )
  }

import {
    Table,
    TableBody,
    TableCaption,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
  } from "@/components/ui/table"
import { Button } from "@/components/ui/button";
  
export default function MainTable() {
    const checkmark = "\u2705";
    const xmark = "\u274C";

    const success = "text-green-500";


    return (
      <div className="min-w-[350px] mt-4 px-2">
        <Table className="">
            <TableHeader>
                <TableRow>
                    <TableHead className="w-[150px]">Name</TableHead>
                    <TableHead className="text-right">Availability</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody >
                <TableRow className="hover:bg-white">
                    <TableCell className={`font-medium ${success}`}>name.io</TableCell>
                    <TableCell className="text-right text-green-500">
                        <Button className="w-[75px] bg-green-500 hover:bg-white hover:text-green-500 border">Click</Button>
                    </TableCell>
                </TableRow>
                <TableRow>
                    <TableCell className={`font-medium ${success}`}>name 1</TableCell>
                    <TableCell className="text-right text-green-500">{checkmark}</TableCell>
                </TableRow>
                <TableRow>
                    <TableCell className={`font-medium ${success}`}>name 2</TableCell>
                    <TableCell className="text-right text-green-500">{checkmark}</TableCell>
                </TableRow>
            </TableBody>
        </Table>
      </div>
    )
  }