perf: template config pref

apps/fronted/src/components/preview/BaseInfo.tsx

@@ -218,7 +218,7 @@ const BaseInfo = ({
       className={fieldsContainerClass}
       style={{
         fontSize: `${globalSettings?.baseFontSize || 14}px`,
-        color: "rgb(75, 85, 99)",
+        color: isModernTemplate ? "#fff" : "rgb(75, 85, 99)",
         maxWidth: layout === "center" ? "none" : "400px",
       }}
     >

apps/fronted/src/components/preview/SectionTitle.tsx

@@ -2,6 +2,9 @@
 import { useMemo } from "react";
 import { GlobalSettings } from "@/types/resume";
 import { useResumeStore } from "@/store/useResumeStore";
+import { cn } from "@/lib/utils";
+import { templateConfigs } from "@/config/templates";
+
 interface SectionTitleProps {
   globalSettings?: GlobalSettings;
   type: string;
@@ -9,28 +12,106 @@ interface SectionTitleProps {
 }
 
 const SectionTitle = ({ type, title, globalSettings }: SectionTitleProps) => {
-  const sectionTitleStyles = {
-    fontSize: `${globalSettings?.headerSize || 18}px`,
-    borderColor: globalSettings?.themeColor,
-    color: globalSettings?.themeColor,
-  };
   const { activeResume } = useResumeStore();
-  const { menuSections = [] } = activeResume || {};
+  const { menuSections = [], templateId = "default" } = activeResume || {};
+
   const renderTitle = useMemo(() => {
     if (type === "custom") {
       return title;
     }
     const sectionConfig = menuSections.find((s) => s.id === type);
     return sectionConfig?.title;
-  }, [menuSections, type]);
+  }, [menuSections, type, title]);
 
-  return (
-    <h3
-      className="font-semibold border-b border-gray-200 pb-2"
-      style={sectionTitleStyles}
-    >
-      {renderTitle}
-    </h3>
+  const config =
+    templateConfigs[templateId as string] || templateConfigs["default"];
+  const { styles } = config.sectionTitle;
+
+  const themeColor = globalSettings?.themeColor;
+
+  const baseStyles = useMemo(
+    () => ({
+      fontSize: `${globalSettings?.headerSize || styles.fontSize}px`,
+      fontWeight: "bold",
+      color: themeColor,
+      marginBottom: `${globalSettings?.paragraphSpacing}px`,
+    }),
+    [
+      globalSettings?.headerSize,
+      globalSettings?.paragraphSpacing,
+      styles.fontSize,
+      themeColor,
+    ]
   );
+
+  const renderTemplateTitle = () => {
+    switch (templateId) {
+      case "modern":
+        return (
+          <h3
+            className={cn("border-b pb-2")}
+            style={{
+              ...baseStyles,
+              borderColor: themeColor,
+            }}
+          >
+            {renderTitle}
+          </h3>
+        );
+
+      case "left-right":
+        return (
+          <div className="relative">
+            <div
+              className="absolute inset-0"
+              style={{
+                backgroundColor: themeColor,
+                opacity: 0.1,
+              }}
+            />
+            <h3
+              className={cn("pl-4 py-1 flex items-center relative")}
+              style={{
+                ...baseStyles,
+                color: themeColor,
+                borderLeft: `3px solid ${themeColor}`,
+              }}
+            >
+              {renderTitle}
+            </h3>
+          </div>
+        );
+
+      case "classic":
+        return (
+          <h3
+            className={cn("pb-2 border-b")}
+            style={{
+              ...baseStyles,
+              color: themeColor,
+              borderColor: themeColor,
+            }}
+          >
+            {renderTitle}
+          </h3>
+        );
+
+      default:
+        return (
+          <h3
+            className={cn("pb-2")}
+            style={{
+              ...baseStyles,
+              color: themeColor,
+            }}
+          >
+            {renderTitle}
+          </h3>
+        );
+    }
+  };
+
+  return renderTemplateTitle();
 };
+
 export default SectionTitle;

apps/fronted/src/components/templates/LeftRightTemplate.tsx

@@ -27,9 +27,9 @@ const LeftRightTemplate: React.FC<LeftRightTemplateProps> = ({
       case "basic":
         return (
           <BaseInfo
-            layout="between"
             basic={data.basic}
             globalSettings={data.globalSettings}
+            template={template}
           ></BaseInfo>
         );
       case "experience":

apps/fronted/src/components/templates/ModernTemplate.tsx

@@ -82,7 +82,7 @@ const ModernTemplate: React.FC<ModernTemplateProps> = ({ data, template }) => {
   return (
     <div className="grid grid-cols-3 w-full">
       <div
-        className="col-span-1 p-4"
+        className="col-span-1 p-4 "
         style={{
           backgroundColor: data.globalSettings.themeColor,
           color: "#ffffff",
@@ -92,7 +92,7 @@ const ModernTemplate: React.FC<ModernTemplateProps> = ({ data, template }) => {
       </div>
 
       <div
-        className="col-span-2 p-4"
+        className="col-span-2 p-4 pt-0"
         style={{
           backgroundColor: colorScheme.background,
           color: colorScheme.text,

apps/fronted/src/config/index.ts

@@ -35,6 +35,9 @@ export const DEFAULT_TEMPLATES: ResumeTemplate[] = [
       itemGap: 16,
       contentPadding: 32,
     },
+    basic: {
+      layout: "center",
+    },
   },
   {
     id: "modern",
@@ -53,6 +56,9 @@ export const DEFAULT_TEMPLATES: ResumeTemplate[] = [
       itemGap: 20,
       contentPadding: 1,
     },
+    basic: {
+      layout: "center",
+    },
   },
   {
     id: "left-right",
@@ -71,6 +77,9 @@ export const DEFAULT_TEMPLATES: ResumeTemplate[] = [
       itemGap: 16,
       contentPadding: 32,
     },
+    basic: {
+      layout: "left",
+    },
   },
 ];
 

apps/fronted/src/config/templates.ts

@@ -0,0 +1,42 @@
+import { TemplateConfig } from "@/types/template";
+
+export const templateConfigs: Record<string, TemplateConfig> = {
+  default: {
+    sectionTitle: {
+      styles: {
+        fontSize: 18,
+      },
+    },
+  },
+  classic: {
+    sectionTitle: {
+      className: "border-b pb-2",
+      styles: {
+        fontSize: 18,
+        borderColor: "var(--theme-color)",
+      },
+    },
+  },
+  modern: {
+    sectionTitle: {
+      className: "font-semibold mb-2 uppercase tracking-wider",
+      styles: {
+        fontSize: 18,
+      },
+    },
+  },
+  "left-right": {
+    sectionTitle: {
+      className: "pl-1 flex items-center",
+      styles: {
+        fontSize: 18,
+        backgroundColor: "var(--theme-color)",
+        opacity: 0.1,
+        color: "var(--theme-color)",
+        borderLeftWidth: "3px",
+        borderLeftStyle: "solid",
+        borderLeftColor: "var(--theme-color)",
+      },
+    },
+  },
+};

apps/fronted/src/store/useResumeStore.ts

@@ -553,6 +553,10 @@ export const useResumeStore = create(
             paragraphSpacing: template.spacing.itemGap,
             pagePadding: template.spacing.contentPadding,
           },
+          basic: {
+            ...resumes[activeResumeId].basic,
+            layout: template.basic.layout,
+          },
         };
 
         set({

apps/fronted/src/types/template.ts

@@ -1,3 +1,5 @@
+import { CSSProperties } from "react";
+
 export interface ResumeTemplate {
   id: string;
   name: string;
@@ -15,4 +17,14 @@ export interface ResumeTemplate {
     itemGap: number;
     contentPadding: number;
   };
+  basic: {
+    layout?: "left" | "center" | "right";
+  };
+}
+
+export interface TemplateConfig {
+  sectionTitle: {
+    className?: string;
+    styles: CSSProperties;
+  };
 }