160341-172821-GuideRowとprops共通のオブジェクト定義

apps/app/src/client/components/PageEditor/EditorGuideModal/contents/TextStyleTab.tsx

@@ -1,17 +1,19 @@
 import React from 'react';
-
 import { useTranslation } from 'react-i18next';
 
+interface TextStyleGuideItem {
+  id: string;
+  title: string;
+  code: string;
+  preview: React.ReactNode;
+}
 
 export const ExternalLinkIcon = () => {
   return (
     <span
-      className="material-symbols-outlined"
+      className="material-symbols-outlined align-middle ms-1 text-muted"
       style={{
         fontSize: '16px',
-        color: '#ABB2BF',
-        verticalAlign: 'middle',
-        marginLeft: '4px',
       }}
     >
       open_in_new
@@ -19,15 +21,13 @@ export const ExternalLinkIcon = () => {
   );
 };
 
+type GuideRowProps = Omit<TextStyleGuideItem, 'id'>;
+
 const GuideRow = ({
   title,
   code,
   preview,
-}: {
-  title: string;
-  code: string;
-  preview: React.ReactNode;
-}) => {
+}: GuideRowProps) => {
   const { t } = useTranslation();
   const handleCopy = async () => {
     await navigator.clipboard.writeText(code);
@@ -83,7 +83,7 @@ export const TextStyleTab: React.FC = () => {
   const { t } = useTranslation();
   const i18nKey = 'editor_guide.textstyle';
 
-  const TEXT_STYLE_GUIDES = [
+  const TEXT_STYLE_GUIDES: TextStyleGuideItem[] = [
     {
       id: 'bold',
       title: t(`${i18nKey}.bold`),
@@ -179,7 +179,6 @@ export const TextStyleTab: React.FC = () => {
           target="_blank"
           rel="noreferrer"
           className="text-secondary text-decoration-underline"
-          style={{ color: '#777570' }}
           onClick={e => e.stopPropagation()}
         >
           {t(`${i18nKey}.link_growi`)}
@@ -195,7 +194,6 @@ export const TextStyleTab: React.FC = () => {
         <a
           href="/Sandbox"
           className="text-secondary text-decoration-underline"
-          style={{ color: '#777570' }}
           onClick={e => e.stopPropagation()}
         >
           {t(`${i18nKey}.link_sandbox`)}