@windrun-huaiin/third-ui 5.5.0 → 5.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "5.5.0",
+  "version": "5.6.1",
   "description": "Third-party integrated UI components for windrun-huaiin projects",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/clerk/clerk-user.tsx

@@ -7,12 +7,13 @@ import { type JSX } from 'react';
 
 interface ClerkUserProps {
   locale: string;
+  // default as true, ‘cause Clerk direct is not well, so just use model for sign-in/sign-up
   clerkAuthInModal?: boolean;
 }
 
 export function ClerkUser({ 
   locale, 
-  clerkAuthInModal = false 
+  clerkAuthInModal = true 
 }: ClerkUserProps): JSX.Element {
   const t = useTranslations('clerk');
   const t2 = useTranslations('footer');

package/src/fuma/fuma-page-genarator.tsx

@@ -1,8 +1,8 @@
-import { TocFooter } from '@third-ui/fuma/mdx/toc';
 import { DocsBody, DocsDescription, DocsPage, DocsTitle } from 'fumadocs-ui/page';
 import { ReactNode } from 'react';
+import { TocFooterWrapper } from '@third-ui/fuma/mdx';
 
-interface FumaPageParams {
+interface FumaPageParams {  
   /* 
    * The source of the mdx content
    */
@@ -51,7 +51,7 @@ export function createFumaPage({
 
     const path = githubBaseUrl ? `${mdxSourceDir}/${page.file.path}` : undefined;
     const tocFooterElement = (
-      <TocFooter
+      <TocFooterWrapper
         lastModified={page.data.date}
         showCopy={showCopy}
         editPath={path}

package/src/fuma/mdx/index.ts

@@ -6,9 +6,9 @@ export * from './trophy-card';
 export * from './image-grid';
 export * from './zia-card';
 export * from './gradient-button';
-export * from './toc';
 export * from './toc-base';
 export * from './fuma-banner-suit';
 export * from './fuma-github-info';
 export * from './site-x';
-export * from './zia-file';
+export * from './zia-file';
+export * from './toc-footer-wrapper';

package/src/fuma/mdx/toc-footer-wrapper.tsx

@@ -0,0 +1,20 @@
+'use client';
+import { EditOnGitHub, LastUpdatedDate, LLMCopyButton } from '@third-ui/fuma/mdx/toc-base';
+
+interface TocFooterProps {
+  lastModified: string | undefined;
+  editPath?: string;
+  githubBaseUrl?: string;
+  showCopy?: boolean;
+}
+
+export function TocFooterWrapper({ lastModified, editPath, githubBaseUrl, showCopy }: TocFooterProps) {
+  const showEdit = githubBaseUrl && editPath;
+  return (
+    <div className="flex flex-col gap-y-2 items-start m-4">
+      <LastUpdatedDate date={lastModified} />
+      {showCopy && <LLMCopyButton />}
+      {showEdit && <EditOnGitHub url={`${githubBaseUrl}${editPath}`} />}
+    </div>
+  );
+} 

package/src/main/cta.tsx

@@ -6,7 +6,7 @@ import { useTranslations } from 'next-intl';
 export function CTA() {
   const t = useTranslations('cta');
   return (
-    <section id="cta" className="container mx-auto px-4 py-20">
+    <section id="cta" className="px-16 py-20 mx-16 md:mx-32">
       <div className="
         bg-gradient-to-r from-[#f7f8fa] via-[#e0c3fc] to-[#b2fefa]
         dark:bg-gradient-to-r dark:from-[#2d0b4e] dark:via-[#6a3fa0] dark:to-[#3a185a]

package/src/main/features.tsx

@@ -1,6 +1,8 @@
 'use client'
 
+import { getGlobalIcon } from '@base-ui/components/global-icon';
 import { useTranslations } from 'next-intl'
+import { globalLucideIcons as icons } from '@base-ui/components/global-icon';
 
 export function Features() {
   const t = useTranslations('features');
@@ -9,25 +11,33 @@ export function Features() {
   const featureItems = t.raw('items') as Array<{
     title: string;
     description: string;
-    icon: string;
+    iconKey: keyof typeof icons;
   }>;
 
   return (
-    <section id="features" className="container mx-auto px-4 py-20">
-      <h2 className="text-3xl md:text-4xl font-bold text-center mb-16">
+    <section id="features" className="px-16 py-10 mx-16 md:mx-32">
+      <h2 className="text-3xl md:text-4xl font-bold text-center mb-4">
         {t('title')} <span className="text-purple-500">{t('eyesOn')}</span>
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-        {featureItems.map((feature, index) => (
-          <div
-            key={index}
-            className="bg-gray-50 dark:bg-gray-800/50 p-8 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-purple-300 dark:hover:border-purple-500/50 transition"
-          >
-            <div className="text-4xl mb-4">{feature.icon}</div>
-            <h3 className="text-xl font-semibold mb-3">{feature.title}</h3>
-            <p className="">{feature.description}</p>
-          </div>
-        ))}
+      <p className="text-center text-gray-600 dark:text-gray-400 mb-12 text-base md:text-lg mx-auto whitespace-nowrap">
+        {t('description')}
+      </p>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-8 gap-y-12">
+        {featureItems.map((feature, index) => {
+          const Icon = getGlobalIcon(feature.iconKey);
+          return (
+            <div
+              key={index}
+              className="bg-white dark:bg-gray-800/60 p-8 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-purple-300 dark:hover:border-purple-500/50 transition shadow-sm dark:shadow-none"
+            >
+              <div className="text-4xl mb-4 flex items-center justify-start">
+                <Icon className="w-8 h-8" />
+              </div>
+              <h3 className="text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100">{feature.title}</h3>
+              <p className="text-gray-700 dark:text-gray-300">{feature.description}</p>
+            </div>
+          )
+        })}
       </div>
     </section>
   )

package/src/main/gallery.tsx

@@ -35,7 +35,7 @@ export function Gallery() {
         {t('description')}
       </p>
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-        {galleryItems.map((prompt, index) => (
+        {galleryItems.map((_prompt, index) => (
           <div key={index} className="group relative overflow-hidden rounded-xl">
             <Image
               src={`/${index + 1}.webp`}

package/src/main/seo-content.tsx

@@ -12,21 +12,30 @@ export function SeoContent() {
   const t = useTranslations('seoContent');
 
   return (
-    <section id="seo" className="container mx-auto px-4 py-20">
-      <h2 className="text-3xl md:text-4xl font-bold text-center mb-16">
+    <section id="seo" className="px-16 py-10 mx-16 md:mx-32">
+      <h1 className="text-3xl md:text-4xl font-bold text-center mb-8">
         {t('title')} <span className="text-purple-500">{t('eyesOn')}</span>
-      </h2>
-      <div className="prose prose-lg dark:prose-invert max-w-4xl mx-auto">
-        <p>{t('intro')}</p>
-
-        {t.raw('sections').map((section: Section, index: number) => (
-          <div key={index}>
-            <h3>{t(`sections.${index}.title`)}</h3>
-            <p>{t(`sections.${index}.content`)}</p>
-          </div>
-        ))}
-
-        <p>{t('conclusion')}</p>
+      </h1>
+      <h3 className="text-center text-gray-600 dark:text-gray-400 mb-12 text-lg">
+        {t('description')}
+      </h3>
+      <div className="bg-gray-50 dark:bg-gray-800/60 border border-gray-200 dark:border-gray-700 rounded-2xl p-8 md:p-12 shadow-sm dark:shadow-none">
+        <div className="space-y-10">
+          <p className="text-gray-600 dark:text-gray-400 text-lg">
+            {t('intro')}
+          </p>
+          {t.raw('sections').map((section: Section, index: number) => (
+            <div key={index}>
+              <h2 className="text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100 flex items-center">
+                {section.title}
+              </h2>
+              <p className="text-gray-700 dark:text-gray-300">{section.content}</p>
+            </div>
+          ))}
+        </div>
+        <p className="mt-10 text-gray-600 dark:text-gray-400 text-lg">
+          {t('conclusion')}
+        </p>
       </div>
     </section>
   )

package/src/main/tips.tsx

@@ -16,11 +16,11 @@ export function Tips() {
   const rightColumn = sections.slice(midPoint);
 
   return (
-    <section id="tips" className="container mx-auto px-4 py-20 bg-gray-50 dark:bg-gray-900/50 rounded-3xl my-20 border border-gray-200 dark:border-transparent">
+    <section id="tips" className="px-16 py-10 mx-16 md:mx-32">
       <h2 className="text-3xl md:text-4xl font-bold text-center mb-16">
         {t('title')} <span className="text-purple-500">{t('eyesOn')}</span>
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-12 bg-gray-50 dark:bg-gray-800/60 border border-gray-200 dark:border-gray-700 rounded-2xl p-8 md:p-12 shadow-sm dark:shadow-none">
         {[leftColumn, rightColumn].map((column: Tip[], colIndex) => (
           <div key={colIndex} className="space-y-8">
             {column.map((tip: Tip, tipIndex) => (

package/src/fuma/mdx/toc.tsx

@@ -1,35 +0,0 @@
-'use client';
-
-import { EditOnGitHub, LastUpdatedDate, LLMCopyButton } from '@third-ui/fuma/mdx/toc-base';
-
-interface TocFooterProps {
-  /**
-   * The last modified date of the page.
-   */
-  lastModified: string | undefined;
-  /**
-   * The path to the file for the \"Edit on GitHub\" link.
-   * This should be the relative path from the repository root, e.g., 'src/mdx/docs/your-page.mdx'.
-   */
-  editPath?: string | undefined;
-  /**
-   * Whether to show the copy button.
-   */
-  showCopy?: boolean | undefined;
-  /**
-   * GitHub base URL for edit links
-   */
-  githubBaseUrl?: string;
-}
-
-export function TocFooter({ lastModified, showCopy, editPath, githubBaseUrl }: TocFooterProps) {
-  const showEdit = githubBaseUrl && editPath;
-  
-  return (
-    <div className="flex flex-col gap-y-2 items-start m-4">
-      <LastUpdatedDate date={lastModified} />
-      {showCopy && <LLMCopyButton />}
-      {showEdit && <EditOnGitHub url={`${githubBaseUrl}${editPath}`} />}
-    </div>
-  );
-}