Start styles, fix some component analyses

justinsilvestre · Nov 21, 2023 · a105ec3 · a105ec3
1 parent 6f5b232
commit a105ec3
Show file tree

Hide file tree

Showing 16 changed files with 271 additions and 154 deletions.
diff --git a/app/components/DictionaryLayout.tsx b/app/components/DictionaryLayout.tsx
@@ -6,7 +6,7 @@ export default function DictionaryLayout({
   className,
 }: PropsWithChildren<{ className?: string }>) {
   return (
-    <body
+    <div
       className={`relative mx-auto flex h-full min-h-screen max-w-5xl flex-col gap-4 bg-white px-2 pb-8 pt-4 ${
         className || ""
       }`}
@@ -21,6 +21,6 @@ export default function DictionaryLayout({
       <ScrollRestoration />
       <Scripts />
       <LiveReload />
-    </body>
+    </div>
   );
 }
diff --git a/app/features/dictionary/AncientCharacterFormSection.tsx b/app/features/dictionary/AncientCharacterFormSection.tsx
@@ -11,7 +11,7 @@ export function AncientCharacterFormSection({
 
   return (
     <div
-      className="relative"
+      className="relative text-center flex flex-col gap-4 align-center justify-center"
       ref={popper.setReferenceElement}
       // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
       tabIndex={0}
@@ -21,15 +21,19 @@ export function AncientCharacterFormSection({
       onFocus={popper.handleFocus}
       onBlur={popper.handleBlur}
     >
-      ancient form{paths.length > 1 ? "s" : ""}
-      {paths.map((path) => (
-        <div
-          key={path}
-          className="inline-block [width:3rem] [height:3rem] border-solid border-2 border-red-900/80 rounded-sm"
-        >
-          <ShuowenSvg path={path} />
-        </div>
-      ))}
+      <h2 className="text-center text-gray-500">
+        ancient form{paths.length > 1 ? "s" : ""}
+      </h2>
+      <div>
+        {paths.map((path) => (
+          <div
+            key={path}
+            className="inline-block [width:4rem] [height:4rem] border-solid border-2 border-red-900/80 rounded-md"
+          >
+            <ShuowenSvg path={path} />
+          </div>
+        ))}
+      </div>
       {popper.isOpen
         ? createPortal(
             <div

diff --git a/app/features/dictionary/DictEntryReadings.tsx b/app/features/dictionary/DictEntryReadings.tsx
@@ -78,7 +78,7 @@ export function DictEntryReadings({
 
   return (
     <section
-      className={`flex flex-col rounded-lg [box-shadow:3px_3px_12px_rgba(0,0,0,.3)] ${className}`}
+      className={`flex flex-col rounded-lg shadow-lg shadow-black/20 bg-gray-50 ${className}`}
     >
       <div className=" flex flex-row flex-wrap justify-evenly gap-4 px-4 py-4">
         <div className="text-left">
@@ -207,7 +207,7 @@ export function DictEntryReadings({
                 : requestOpen();
             }
           }}
-          className={`cursor-pointer px-4 pb-2 text-right hover:text-orange-700 hover:underline`}
+          className={`  cursor-pointer px-4 pb-2 text-right hover:text-orange-700 hover:underline`}
           onClick={() =>
             animationState === "entered" || animationState === "entering"
               ? requestClose()
@@ -317,10 +317,10 @@ function OnReading({ onReading, i }: { onReading: string; i: number }) {
     <span key={onReading} className="inline-block">
       <span className="block">
         {i !== 0 ? "・" : ""}
-        {onReading.replace(/[a-z0-9]*$/g, "")}{" "}
+        {onReading.replace(/-/g, "")}{" "}
       </span>
       <span className=" block text-center text-sm uppercase">
-        {kanjidicKanaToRomaji(onReading.replace(/[a-z0-9]*$/g, ""))}
+        {kanjidicKanaToRomaji(onReading.replace(/-/g, ""))}
       </span>
     </span>
   );

diff --git a/app/features/dictionary/DictionaryEntryComponentsTree.tsx b/app/features/dictionary/DictionaryEntryComponentsTree.tsx
@@ -20,11 +20,15 @@ import { FigureKeywordDisplay } from "./SingleFigureDictionaryEntry";
 
 export function DictionaryEntryComponentsTree({
   figure,
+  className,
 }: {
   figure: DictionaryPageFigureWithPriorityUses;
+  className?: string;
 }) {
   return (
-    <section>
+    <section
+      className={`${className} flex flex-row flex-wrap gap-4 justify-evenly`}
+    >
       {figure.firstClassComponents
         .sort((a, b) => a.indexInTree - b.indexInTree)
         .map(({ componentId, component }) => {
@@ -63,6 +67,7 @@ function DictionaryEntryComponentsTreeMember({
       <FigurePopoverBadge
         id={componentFigure.id}
         badgeProps={getBadgeProps(componentFigure)}
+        width={6}
       />
       <FigureKeywordDisplay figure={componentFigure} />
       <br />

diff --git a/app/features/dictionary/DictionaryHeadingMeanings.tsx b/app/features/dictionary/DictionaryHeadingMeanings.tsx
@@ -2,11 +2,13 @@ import { getHeadingsMeanings } from "~/features/dictionary/getHeadingsMeanings";
 
 export function DictionaryHeadingMeanings({
   headingsMeanings,
+  className,
 }: {
   headingsMeanings: ReturnType<typeof getHeadingsMeanings>;
+  className?: string;
 }) {
   return (
-    <div>
+    <div className={`${className} gap-4 flex flex-col`}>
       {headingsMeanings.currentCharacter ? (
         <h1>{headingsMeanings.currentCharacter.join("; ")}</h1>
       ) : null}
@@ -15,7 +17,7 @@ export function DictionaryHeadingMeanings({
       ) : null}
       {headingsMeanings.componentMnemonic ? (
         <h1>
-          <div className="text-gray-500">component mnemonic:</div>
+          <div className="text-gray-500 text-sm">component mnemonic:</div>
           {headingsMeanings.componentMnemonic.text}
           {headingsMeanings.componentMnemonic.reference ? (
             <>
@@ -28,7 +30,9 @@ export function DictionaryHeadingMeanings({
       ) : null}
       {headingsMeanings.obsoleteCharacter ? (
         <h1>
-          <div className="text-gray-500">historical character meaning:</div>
+          <div className="text-gray-500 text-sm">
+            historical character meaning:
+          </div>
           {headingsMeanings.obsoleteCharacter.join("; ")}
         </h1>
       ) : null}

diff --git a/app/features/dictionary/ExternalDictionaryLinks.tsx b/app/features/dictionary/ExternalDictionaryLinks.tsx
@@ -2,9 +2,15 @@ import * as MdIcons from "react-icons/md";
 
 import A from "~/components/ExternalLink";
 
-export function ExternalDictionaryLinks({ figureId }: { figureId: string }) {
+export function ExternalDictionaryLinks({
+  figureId,
+  className,
+}: {
+  figureId: string;
+  className?: string;
+}) {
   return (
-    <section className="">
+    <section className={className}>
       <ul className="text-sm">
         <li className="">
           <A

diff --git a/app/features/dictionary/FigurePriorityUses.tsx b/app/features/dictionary/FigurePriorityUses.tsx
@@ -7,76 +7,95 @@ import { OnAndGuangyunReadings } from "./OnAndGuangyunReadings";
 import { FigureKeywordDisplay } from "./SingleFigureDictionaryEntry";
 import { transcribeSbgyXiaoyun } from "./transcribeSbgyXiaoyun";
 
+const PRELOADED_USES_COUNT = 15;
+
 export function FigurePriorityUses({
   componentFigure,
   priorityUses,
+  count,
+  className,
 }: {
   componentFigure: DictionaryPageFigureWithPriorityUses;
   priorityUses: DictionaryPageFigureWithPriorityUses["firstClassUses"];
+  count: number;
+  className?: string;
 }) {
   if (!priorityUses.length) return null;
 
   return (
-    <>
-      <h2>used as a component in {priorityUses.length} priority figures</h2>
-
-      <ul>
-        {priorityUses.map((u) => {
-          const figureIsSoundMarkUse =
-            u.parent.activeSoundMarkId === componentFigure.id;
-          const parentReading = u.parent.reading;
-          const parentReadingMatchingSoundMark = figureIsSoundMarkUse
-            ? getParentReadingMatchingSoundMark(
-                u.parent.activeSoundMarkValue,
-                componentFigure.reading,
-                parentReading,
-              )
-            : null;
+    <section className={`${className} flex flex-row  justify-center`}>
+      <div className="">
+        <h2>used as a component in:</h2>
 
-          return (
-            <li
-              key={u.parentId}
-              className={`inline-block m-4 align-top ${
-                !u.parent.isPriority ? "bg-slate-200" : ""
-              }`}
-            >
-              <FigurePopoverBadge
-                className="block"
-                id={u.parent.id}
-                badgeProps={getBadgeProps(u.parent)}
-                width={5}
-              />
+        <ul>
+          {priorityUses.map((u) => {
+            const figureIsSoundMarkUse =
+              u.parent.activeSoundMarkId === componentFigure.id;
+            const parentReading = u.parent.reading;
+            const parentReadingMatchingSoundMark = figureIsSoundMarkUse
+              ? getParentReadingMatchingSoundMark(
+                  u.parent.activeSoundMarkValue,
+                  componentFigure.reading,
+                  parentReading,
+                )
+              : null;
 
-              <span>
-                <FigureKeywordDisplay figure={u.parent} />
-              </span>
-              <br />
-              {parentReadingMatchingSoundMark ? (
-                <OnAndGuangyunReadings
-                  katakanaOn={parentReadingMatchingSoundMark.katakanaOn}
-                  guangyun={parentReadingMatchingSoundMark.guangyun}
-                  hasSoundMarkHighlight
+            return (
+              <li
+                key={u.parentId}
+                className={`inline-block m-4 align-top ${
+                  !u.parent.isPriority ? "bg-slate-200" : ""
+                }`}
+              >
+                <FigurePopoverBadge
+                  className="block"
+                  id={u.parent.id}
+                  badgeProps={getBadgeProps(u.parent)}
+                  width={5}
                 />
+
+                <span>
+                  <FigureKeywordDisplay figure={u.parent} />
+                </span>
+                <br />
+                {parentReadingMatchingSoundMark ? (
+                  <OnAndGuangyunReadings
+                    katakanaOn={parentReadingMatchingSoundMark.katakanaOn}
+                    guangyun={parentReadingMatchingSoundMark.guangyun}
+                    hasSoundMarkHighlight
+                  />
+                ) : (
+                  <OnAndGuangyunReadings
+                    katakanaOn={
+                      parentReading?.selectedOnReadings?.[0] ||
+                      parentReading?.kanjidicEntry?.onReadings?.[0] ||
+                      null
+                    }
+                    guangyun={
+                      parentReading?.sbgyXiaoyuns?.length
+                        ? transcribeSbgyXiaoyun(
+                            parentReading.sbgyXiaoyuns[0].sbgyXiaoyun,
+                          )
+                        : null
+                    }
+                  />
+                )}
+              </li>
+            );
+          })}
+          {count > PRELOADED_USES_COUNT ? (
+            <li className="inline-block m-4 align-top">
+              and {count - PRELOADED_USES_COUNT} more{" "}
+              {count - PRELOADED_USES_COUNT > 1 ? (
+                <>components/characters</>
               ) : (
-                <OnAndGuangyunReadings
-                  katakanaOn={
-                    parentReading?.selectedOnReadings?.[0] ||
-                    parentReading?.kanjidicEntry?.onReadings?.[0] ||
-                    null
-                  }
-                  guangyun={
-                    parentReading?.sbgyXiaoyuns?.length
-                      ? transcribeSbgyXiaoyun(
-                          parentReading.sbgyXiaoyuns[0].sbgyXiaoyun,
-                        )
-                      : null
-                  }
-                />
+                <>component/character</>
               )}
+              .
             </li>
-          );
-        })}
-      </ul>
-    </>
+          ) : null}
+        </ul>
+      </div>
+    </section>
   );
 }
diff --git a/app/features/dictionary/FigureTags.tsx b/app/features/dictionary/FigureTags.tsx
@@ -173,7 +173,7 @@ export function FigureTags({
                 <strong>identical or similar</strong> pronunciation.
               </p>
               <p className="mt-0 mb-3">
-                Note that this only works with <i>on*apos;yomi</i>.
+                Note that this only works with <i>on&apos;yomi</i>.
               </p>
               <PopoverBottom>
                 <BrowseComponentsLink>