diff --git a/apps/fronted/src/app/globals.css b/apps/fronted/src/app/globals.css index cf1d8d3..fb68765 100644 --- a/apps/fronted/src/app/globals.css +++ b/apps/fronted/src/app/globals.css @@ -10,7 +10,8 @@ --card-foreground: 224 71.4% 4.1%; --popover: 0 0% 100%; --popover-foreground: 224 71.4% 4.1%; - --primary: 262.1 83.3% 57.8%; + /* --primary: 262.1 83.3% 57.8%; */ + --primary: 240 5.9% 10%; --primary-foreground: 210 20% 98%; --secondary: 220 14.3% 95.9%; --secondary-foreground: 220.9 39.3% 11%; @@ -22,7 +23,8 @@ --destructive-foreground: 210 20% 98%; --border: 220 13% 91%; --input: 220 13% 91%; - --ring: 262.1 83.3% 57.8%; + /* --ring: 262.1 83.3% 57.8%; */ + --ring: 240 5.9% 10%; --radius: 0.75rem; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; diff --git a/apps/fronted/src/components/magicui/dock.tsx b/apps/fronted/src/components/magicui/dock.tsx new file mode 100644 index 0000000..a022471 --- /dev/null +++ b/apps/fronted/src/components/magicui/dock.tsx @@ -0,0 +1,106 @@ +import { cn } from "@/lib/utils"; +import React, { PropsWithChildren } from "react"; +import { motion } from "framer-motion"; + +interface DockProps extends PropsWithChildren> { + className?: string; +} + +export function Dock({ children, className, ...props }: DockProps) { + // Convert children to array to handle them + const childrenArray = React.Children.toArray(children); + + // Find the index of TemplateSheet for splitting + const templateSheetIndex = childrenArray.findIndex((child) => { + if (React.isValidElement(child)) { + const tooltip = child.props.children; + if (React.isValidElement(tooltip)) { + const trigger = tooltip.props.children.find( + (child: any) => child?.type?.name === "TooltipTrigger" + ); + if (trigger) { + const content = trigger.props.children; + if (React.isValidElement(content)) { + const icon = content.props.children; + return React.isValidElement(icon) && icon.type?.name === "TemplateSheet"; + } + } + } + } + return false; + }); + + // If TemplateSheet is not found, render all children in a single group + if (templateSheetIndex === -1) { + return ( +
+
{children}
+
+ ); + } + + // Split children into three groups + const topChildren = childrenArray.slice(0, templateSheetIndex); + const middleChild = childrenArray[templateSheetIndex]; + const bottomChildren = childrenArray.slice(templateSheetIndex + 1); + + return ( +
+ {/* Top group */} + {topChildren.length > 0 && ( +
{topChildren}
+ )} + + {/* Decorative line */} + {topChildren.length > 0 && ( +
+ )} + + {/* Middle (TemplateSheet) */} + {middleChild} + + {/* Decorative line */} + {bottomChildren.length > 0 && ( +
+ )} + + {/* Bottom group */} + {bottomChildren.length > 0 && ( +
{bottomChildren}
+ )} +
+ ); +} + +interface DockIconProps extends PropsWithChildren { + className?: string; + onClick?: () => void; +} + +export function DockIcon({ children, className, onClick }: DockIconProps) { + return ( + + {children} + + ); +} diff --git a/apps/fronted/src/components/preview/index.tsx b/apps/fronted/src/components/preview/index.tsx index 5434fae..39b8cb4 100644 --- a/apps/fronted/src/components/preview/index.tsx +++ b/apps/fronted/src/components/preview/index.tsx @@ -1,12 +1,20 @@ "use client"; -import React, { useEffect, useMemo, useState } from "react"; +import React, { useEffect, useMemo, useState, useRef } from "react"; import { throttle } from "lodash"; import TemplateSheet from "@/components/shared/TemplateSheet"; +import { Dock, DockIcon } from "@/components/magicui/dock"; import ResumeTemplateComponent from "../templates"; -import { DEFAULT_TEMPLATES } from "@/config"; +import { DEFAULT_TEMPLATES, GITHUB_REPO_URL } from "@/config"; import { cn } from "@/lib/utils"; import { useResumeStore } from "@/store/useResumeStore"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@/components/ui/tooltip"; +export type IconProps = React.HTMLAttributes; const getFontFamilyClass = (fontFamily: string) => { switch (fontFamily) { case "serif": @@ -54,6 +62,17 @@ const PageBreakLine = React.memo(({ pageNumber }: PageBreakLineProps) => { PageBreakLine.displayName = "PageBreakLine"; +const Icons = { + gitHub: (props: IconProps) => ( + + + + ), +}; + const PreviewPanel = () => { const { activeResume } = useResumeStore(); const template = useMemo(() => { @@ -63,6 +82,9 @@ const PreviewPanel = () => { ); }, [activeResume?.templateId]); + const startRef = useRef(null); + const endRef = useRef(null); + const previewRef = React.useRef(null); const resumeContentRef = React.useRef(null); const [contentHeight, setContentHeight] = useState(0); @@ -97,6 +119,10 @@ const PreviewPanel = () => { if (!activeResume) return null; + const handleGoGitHub = () => { + window.open(GITHUB_REPO_URL, "_blank"); + }; + return (
{ >
{
- + +
+ + + + + +
+ +
+ + +

Go GitHub

+ + + + + + +
+ +
+ + +

切换模版

+ + + + + +
); }; diff --git a/apps/fronted/src/components/shared/TemplateSheet.tsx b/apps/fronted/src/components/shared/TemplateSheet.tsx index e4843c9..293d4e7 100644 --- a/apps/fronted/src/components/shared/TemplateSheet.tsx +++ b/apps/fronted/src/components/shared/TemplateSheet.tsx @@ -1,4 +1,4 @@ -import { Layout, LayoutTemplate } from "lucide-react"; +import { Layout, PanelsLeftBottom } from "lucide-react"; import { motion } from "framer-motion"; import { Sheet, @@ -21,13 +21,7 @@ const TemplateSheet = () => { return ( - + diff --git a/apps/fronted/src/config/index.ts b/apps/fronted/src/config/index.ts index 31d2e22..1e93317 100644 --- a/apps/fronted/src/config/index.ts +++ b/apps/fronted/src/config/index.ts @@ -74,3 +74,5 @@ export const DEFAULT_TEMPLATES: ResumeTemplate[] = [ }, }, ]; + +export const GITHUB_REPO_URL = "https://github.com/JOYCEQL/magic-resume";