✨ Minor ui touchups

Author: chanjunren

www/src/components/home/quote/index.tsx

@@ -24,25 +24,27 @@ export default function Quote() {
   return (
     <HoverCard>
       <HoverCardTrigger asChild>
-        <div className="mb-2 flex gap-20 cursor-help">
-          {/* <span
-            className="text-muted-foreground letter"
+        <div className="mb-2 flex cursor-help gap-5">
+          <span
+            className="text-muted-foreground letter tracking-widest"
             style={{ writingMode: "vertical-rl" }}
           >
             {featuredQuote.source}
-          </span> */}
-          {quoteParts.map((part, index) => (
-            <span
-              className="text-3xl tracking-widest"
-              key={index}
-              style={{ writingMode: "vertical-rl" }}
-            >
-              {part.trim()}
-            </span>
-          ))}
+          </span>
+          <div className="gap-20 flex">
+            {quoteParts.map((part, index) => (
+              <span
+                className="text-3xl tracking-widest"
+                key={index}
+                style={{ writingMode: "vertical-rl" }}
+              >
+                {part.trim()}
+              </span>
+            ))}
+          </div>
         </div>
       </HoverCardTrigger>
-      <HoverCardContent className="w-auto max-w-6xl">
+      <HoverCardContent className="w-auto max-w-6xl" sideOffset={30}>
         <QuoteInfo quote={featuredQuote} />
       </HoverCardContent>
     </HoverCard>

www/src/components/home/quote/quote-info.tsx

@@ -6,14 +6,17 @@ interface IQuoteInfo {
   quote: QuoteContent;
 }
 const QuoteInfo: FC<IQuoteInfo> = ({ quote }) => {
-  const { meaning, background, pinyin } = quote;
+  const { meaning, background, pinyin, sourceInfo } = quote;
 
   return (
     <div className="flex flex-col gap-3">
       <span className="text-muted-foreground">{pinyin}</span>
       <Separator />
       <span>{meaning}</span>
+      <br />
       <span>{background}</span>
+      <Separator />
+      <span>{sourceInfo}</span>
     </div>
   );
 };

www/src/types/quotes.ts

@@ -3,6 +3,7 @@ export interface QuoteContent {
   meaning: string;
   background: string;
   source: string;
+  sourceInfo: string;
   pinyin: string;
 }