Function TableRow

app/src/components/admin/Projects/AdminProjectsTable.tsx:72–118

({ project }: { project: AdminProjectType })

}

const TableRow = ({ project }: { project: AdminProjectType }) => {
  const [expandedRow, setExpandedRow] = useState<string | null>(null);

  return (
    <>
      <Tr
        onClick={() => setExpandedRow(project.id === expandedRow ? null : project.id)}
        _hover={{ td: { bgColor: "gray.50", cursor: "pointer" } }}
        transition="background-color 1.2s"
        fontSize="sm"
      >
        <Td>
          <Text as="b">
            <Link
              href={{
                pathname: `/p/[projectSlug]/request-logs`,
                query: { projectSlug: project.slug },
              }}
            >
              <Button variant="ghost">{project.name}</Button>
            </Link>
          </Text>
        </Td>
        <Td isNumeric>
          <Box whiteSpace="nowrap" minW="120px">
            {dayjs(project.createdAt).format("MMMM D h:mm A")}
          </Box>
        </Td>
        <Td>{project.slug}</Td>
        <Td>
          {project.projectUsers.map((user) => (
            <Text key={user.email}>
              {user.name} ({user.email})
            </Text>
          ))}
        </Td>
        <Td isNumeric>{project.fineTunesCount}</Td>
        <Td isNumeric>
          {project.lastUsageLog[0]?.usageLogCreatedAt
            ? dayjs(project.lastUsageLog[0]?.usageLogCreatedAt).format("DD MMM YYYY")
            : "-"}
        </Td>
      </Tr>
      <ExtendableArea expandedRow={expandedRow} project={project} />
    </>
  );
};

interface ExtendableAreaProps {
  expandedRow: string | null;