feat: Typeテンプレートのスタイルを設定

Author: 3w36zj6

website/src/components/templates/TypeTemplate.tsx

@@ -2,7 +2,8 @@ import type { FC } from "hono/jsx";
 import BaseTemplate, { type BaseTemplateProps } from "./BaseTemplate";
 import type { TypeBody, Page } from "../../types/model";
 import { Tooltip, FunctionDisplay } from "../ui";
-import { type2class } from "../ui/type2class";
+import { TypeIcon } from "../ui/TypeIcon";
+import { type2href } from "../ui/type2href";
 
 export type TypeTemplateProps = Omit<BaseTemplateProps, "page"> & {
   page: Omit<Page, "body"> & {
@@ -28,19 +29,16 @@ export const TypeTemplate: FC<TypeTemplateProps> = ({
       nextPage={nextPage}
     >
       <h1 id="summary">
-        <span class={`pill ${type2class(content.name)}`}>{content.name}</span>
+        <TypeIcon type={content.name} isHeading={true} />
       </h1>
 
       <div dangerouslySetInnerHTML={{ __html: content.details }} />
 
       {content.constructor && (
         <>
-          <h2 id="constructor">
-            <Tooltip
-              name="コンストラクタ"
-              desc="If a type has a constructor, you can call it like a function to create a new value of the type."
-              prefix="constructor"
-            />
+          <h2 id="constructor" class="flex items-center gap-1">
+            コンストラクタ
+            <Tooltip kind="parameters" />
           </h2>
 
           <FunctionDisplay
@@ -53,32 +51,22 @@ export const TypeTemplate: FC<TypeTemplateProps> = ({
 
       {content.scope.length > 0 && (
         <>
-          <h2 id="definitions">
-            <Tooltip
-              name="定義"
-              desc="Functions and types and can have associated definitions. These are accessed by specifying the function or type, followed by a period, and then the definition's name."
-              prefix="definitions"
-            />
+          <h2 id="definitions" class="flex items-center gap-1">
+            定義
+            <Tooltip kind="definitions" />
           </h2>
 
           {content.scope.map((method, index) => (
             <div>
-              <h3 id={`definitions-${method.name}`} class="method-head">
-                <code>{method.name}</code>
-                <small>
-                  {method.element && (
-                    <Tooltip
-                      name="Element"
-                      desc="Element functions can be customized with <code>set</code> and <code>show</code> rules."
-                    />
-                  )}
-                  {method.contextual && (
-                    <Tooltip
-                      name="Contextual"
-                      desc="Contextual functions can only be used when the context is known"
-                    />
-                  )}
-                </small>
+              <h3
+                id={`definitions-${method.name}`}
+                class="method-head flex items-center gap-2 mb-3"
+              >
+                <code class="text-base font-medium">{method.name}</code>
+                <div class="flex flex-wrap items-center gap-2">
+                  {method.element && <Tooltip kind="element" />}
+                  {method.contextual && <Tooltip kind="contextual" />}
+                </div>
               </h3>
 
               <FunctionDisplay

website/src/components/ui/TypeIcon.tsx

@@ -3,6 +3,7 @@ import { FC } from "hono/jsx";
 type TypeIconProps = {
   type: string;
   href?: string;
+  isHeading?: boolean;
 };
 
 const getTypeStyles = (
@@ -51,9 +52,18 @@ const getTypeStyles = (
   );
 };
 
-export const TypeIcon: FC<TypeIconProps> = ({ type, href }) => {
+export const TypeIcon: FC<TypeIconProps> = ({
+  type,
+  href,
+  isHeading = false,
+}) => {
   const styles = getTypeStyles(type);
-  const baseClasses = `pill ${styles.bgColor} ${styles.textColor} rounded-md px-1.5 py-0.5 text-sm font-mono whitespace-nowrap inline-flex items-center mx-0.5`;
+
+  const sizeClasses = isHeading
+    ? "text-3xl px-3 py-1.5"
+    : "text-sm px-1.5 py-0.5";
+
+  const baseClasses = `pill ${styles.bgColor} ${styles.textColor} rounded-md ${sizeClasses} font-mono whitespace-nowrap inline-flex items-center mx-0.5`;
 
   if (href) {
     return (