refactor: rename Title to CanaryCheckName for clarity

Author: mainawycliffe

src/components/Canary/CanaryCards.tsx

@@ -1,7 +1,6 @@
-import React from "react";
-import { GetName } from "./data";
-import { Title, StatusList } from "./renderers";
 import { HealthCheck } from "../../api/types/health";
+import { GetName } from "./data";
+import { CanaryCheckName, StatusList } from "./renderers";
 
 type CanaryCardProps = {
   checks: HealthCheck[];
@@ -23,7 +22,10 @@ export function CanaryCards({ checks, onClick }: CanaryCardProps) {
           >
             <div className="flex-1 py-2 text-sm">
               <span className="truncate font-medium text-gray-900 hover:text-gray-600">
-                <Title title={GetName(check)} icon={check.icon || check.type} />
+                <CanaryCheckName
+                  title={GetName(check)}
+                  icon={check.icon || check.type}
+                />
               </span>
               <div className="float-right mr-2">
                 <StatusList check={check} />

src/components/Canary/Columns/index.tsx

@@ -6,7 +6,13 @@ import dayjs from "dayjs";
 import { Status } from "../../Status";
 import { GetName } from "../data";
 import style from "../index.module.css";
-import { Duration, Percentage, StatusList, Title, empty } from "../renderers";
+import {
+  CanaryCheckName,
+  Duration,
+  empty,
+  Percentage,
+  StatusList
+} from "../renderers";
 import { removeNamespacePrefix } from "../utils";
 import {
   getHealthPercentageScore,
@@ -131,7 +137,7 @@ export function TitleCell({
         //   paddingLeft: `${row.depth * 1.1}rem`
         // }}
       >
-        <Title
+        <CanaryCheckName
           title={title}
           icon={rowValues.icon || rowValues.type}
           isDeleted={!!row.original.deleted_at}

src/components/Canary/renderers.tsx

@@ -120,13 +120,17 @@ export function Percentage({ val, upper, lower }: PercentageProps) {
   );
 }
 
-type TitleProps = {
+type CanaryCheckNameProps = {
   icon?: string;
   title: string;
   isDeleted?: boolean;
 };
 
-export function Title({ icon, title, isDeleted }: TitleProps) {
+export function CanaryCheckName({
+  icon,
+  title,
+  isDeleted
+}: CanaryCheckNameProps) {
   return (
     <>
       {icon && <Icon name={icon} className="h-6 w-auto" />}