May 21, 2024 · May 21, 2024 · May 21, 2024
diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
  HelpTooltipTrigger,
 } from "components/HelpTooltip/HelpTooltip";
 import { Loader } from "components/Loader/Loader";
 import { Stack } from "components/Stack/Stack";
 import { UserAvatar } from "components/UserAvatar/UserAvatar";
 import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata";
 import { useTemplateLayoutContext } from "pages/TemplatePage/TemplateLayout";
                return (
                  <div
                    key={usage.slug}
                    css={{ display: "flex", gap:16, alignItems: "center" }}
                    css={{ display: "flex", gap:24, alignItems: "center" }}
                  >
                    <div
                      css={{ display: "flex", alignItems: "center", gap: 8 }}
                        },
                      }}
                    />
                    <div
                    <Stack
                      spacing={0}
                      css={{
                        fontSize: 13,
                        color: theme.palette.text.secondary,
                        width: 120,
                        flexShrink: 0,
                        lineHeight: "1.5",
                      }}
                    >
                      {formatTime(usage.seconds)}
                    </div>
                      <span
                        css={{
                          fontSize: 12,
                          color: theme.palette.text.disabled,
                        }}
                      >
                        Opened {usage.times_used.toLocaleString()}{" "}
                        {usage.times_used === 1 ? "time" : "times"}
                      </span>
                    </Stack>
                  </div>
                );
              })}
 };

 function formatTime(seconds: number): string {
  if (seconds < 60) {
    return seconds + " seconds";
  } else if (seconds >= 60 && seconds < 3600) {
    const minutes = Math.floor(seconds / 60);
    return minutes + " minutes";
  let value: {
    amount: number;
    unit: "seconds" | "minutes" | "hours";
  } = {
    amount: seconds,
    unit: "seconds",
  };

  if (seconds >= 60 && seconds < 3600) {
    value = {
      amount: Math.floor(seconds / 60),
      unit: "minutes",
    };
  } else {
 const hours = seconds / 3600;
 const minutes = Math.floor(seconds% 3600);
 if (minutes === 0) {
  return hours.toFixed(0) + " hours";
 }
 value = {
  amount:seconds/ 3600,
  unit: "hours",
 };
  }

    return hours.toFixed(1) + " hours";
  if (value.amount === 1) {
    const singularUnit = value.unit.slice(0, -1);
    return `${value.amount} ${singularUnit}`;
  }

  return `${value.amount.toLocaleString(undefined, {
    maximumFractionDigits: 1,
    minimumFractionDigits: 0,
  })} ${value.unit}`;
 }

 function toISOLocal(d: Date, offset: number) {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -52,6 +52,7 @@ import {
		HelpTooltipTrigger,
		} from "components/HelpTooltip/HelpTooltip";
		import { Loader } from "components/Loader/Loader";
		import { Stack } from "components/Stack/Stack";
		import { UserAvatar } from "components/UserAvatar/UserAvatar";
		import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata";
		import { useTemplateLayoutContext } from "pages/TemplatePage/TemplateLayout";
Expand DownExpand Up		@@ -451,7 +452,7 @@ const TemplateUsagePanel: FC<TemplateUsagePanelProps> = ({
		return (
		<div
		key={usage.slug}
		css={{ display: "flex", gap:16, alignItems: "center" }}
		css={{ display: "flex", gap:24, alignItems: "center" }}
		>
		<div
		css={{ display: "flex", alignItems: "center", gap: 8 }}
Expand DownExpand Up		@@ -492,16 +493,27 @@ const TemplateUsagePanel: FC<TemplateUsagePanelProps> = ({
		},
		}}
		/>
		<div
		<Stack
		spacing={0}
		css={{
		fontSize: 13,
		color: theme.palette.text.secondary,
		width: 120,
		flexShrink: 0,
		lineHeight: "1.5",
		}}
		>
		{formatTime(usage.seconds)}
		</div>
		<span
		css={{
		fontSize: 12,
		color: theme.palette.text.disabled,
		}}
		>
		Opened {usage.times_used.toLocaleString()}{" "}
		{usage.times_used === 1 ? "time" : "times"}
		</span>
		</Stack>
		</div>
		);
		})}
Expand DownExpand Up		@@ -869,20 +881,35 @@ const TextValue: FC<PropsWithChildren> = ({ children }) => {
		};

		function formatTime(seconds: number): string {
		if (seconds < 60) {
		return seconds + " seconds";
		} else if (seconds >= 60 && seconds < 3600) {
		const minutes = Math.floor(seconds / 60);
		return minutes + " minutes";
		let value: {
		amount: number;
		unit: "seconds" \| "minutes" \| "hours";
		} = {
		amount: seconds,
		unit: "seconds",
		};

		if (seconds >= 60 && seconds < 3600) {
		value = {
		amount: Math.floor(seconds / 60),
		unit: "minutes",
		};
		} else {
		const hours = seconds / 3600;
		const minutes = Math.floor(seconds% 3600);
		if (minutes === 0) {
		return hours.toFixed(0) + " hours";
		}
		value = {
		amount:seconds/ 3600,
		unit: "hours",
		};
		}

		return hours.toFixed(1) + " hours";
		if (value.amount === 1) {
		const singularUnit = value.unit.slice(0, -1);
		return `${value.amount} ${singularUnit}`;
		}

		return `${value.amount.toLocaleString(undefined, {
		maximumFractionDigits: 1,
		minimumFractionDigits: 0,
		})} ${value.unit}`;
		}

		function toISOLocal(d: Date, offset: number) {
Expand Down