Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-22 20:51:29 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix issue with missing DialogTitle/DialogDescription, fix issue with hot reloads

Browse Source
This commit is contained in:
Amruth Pillai
2025-01-19 22:01:37 +01:00
parent 18cf814779
commit 460a40711e
27 changed files with 136 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/client/src/pages/builder/sidebars/left/sections/basics.tsx
View File

@ -6,7 +6,7 @@ import { useResumeStore } from "@/client/stores/resume";
import { CustomFieldsSection } from "./custom/section";
import { PictureSection } from "./picture/section";
import { getSectionIcon } from "./shared/section-icon";
import { SectionIcon } from "./shared/section-icon";
import { URLInput } from "./shared/url-input";
export const BasicsSection = () => {
@ -17,7 +17,7 @@ export const BasicsSection = () => {
<section id="basics" className="grid gap-y-6">
<header className="flex items-center justify-between">
<div className="flex items-center gap-x-4">
{getSectionIcon("basics")}
<SectionIcon id="basics" size={18} />
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Basics`}</h2>
</div>
</header>

5
apps/client/src/pages/builder/sidebars/left/sections/shared/section-base.tsx
View File

@ -25,7 +25,7 @@ import get from "lodash.get";
import { useDialog } from "@/client/stores/dialog";
import { useResumeStore } from "@/client/stores/resume";
import { getSectionIcon } from "./section-icon";
import { SectionIcon } from "./section-icon";
import { SectionListItem } from "./section-list-item";
import { SectionOptions } from "./section-options";
@ -98,8 +98,7 @@ export const SectionBase = <T extends SectionItem>({ id, title, description }: P
>
<header className="flex items-center justify-between">
<div className="flex items-center gap-x-4">
{getSectionIcon(id)}
<SectionIcon id={id} size={18} />
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{section.name}</h2>
</div>

9
apps/client/src/pages/builder/sidebars/left/sections/shared/section-icon.tsx
View File

@ -23,7 +23,7 @@ import get from "lodash.get";
import { useResumeStore } from "@/client/stores/resume";
export const getSectionIcon = (id: SectionKey, props: IconProps = {}) => {
const getSectionIcon = (id: SectionKey, props: IconProps = {}) => {
switch (id) {
// Left Sidebar
case "basics": {
@ -75,13 +75,14 @@ export const getSectionIcon = (id: SectionKey, props: IconProps = {}) => {
}
};
type SectionIconProps = ButtonProps & {
type SectionIconProps = Omit<ButtonProps, "size"> & {
id: SectionKey;
name?: string;
size?: number;
icon?: React.ReactNode;
};
export const SectionIcon = ({ id, name, icon, ...props }: SectionIconProps) => {
export const SectionIcon = ({ id, name, icon, size = 14, ...props }: SectionIconProps) => {
const section = useResumeStore((state) =>
get(state.resume.data.sections, id, defaultSection),
) as SectionWithItem;
@ -89,7 +90,7 @@ export const SectionIcon = ({ id, name, icon, ...props }: SectionIconProps) => {
return (
<Tooltip side="right" content={name ?? section.name}>
<Button size="icon" variant="ghost" className="size-8 rounded-full" {...props}>
{icon ?? getSectionIcon(id, { size: 14 })}
{icon ?? getSectionIcon(id, { size })}
</Button>
</Tooltip>
);

4
apps/client/src/pages/builder/sidebars/left/sections/summary.tsx
View File

@ -5,7 +5,7 @@ import { cn } from "@reactive-resume/utils";
import { AiActions } from "@/client/components/ai-actions";
import { useResumeStore } from "@/client/stores/resume";
import { getSectionIcon } from "./shared/section-icon";
import { SectionIcon } from "./shared/section-icon";
import { SectionOptions } from "./shared/section-options";
export const SummarySection = () => {
@ -19,7 +19,7 @@ export const SummarySection = () => {
<section id="summary" className="grid gap-y-6">
<header className="flex items-center justify-between">
<div className="flex items-center gap-x-4">
{getSectionIcon("summary")}
<SectionIcon id="summary" size={18} />
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{section.name}</h2>
</div>

4
apps/client/src/pages/builder/sidebars/right/sections/css.tsx
View File

@ -7,7 +7,7 @@ import CodeEditor from "react-simple-code-editor";
import { useResumeStore } from "@/client/stores/resume";
import { getSectionIcon } from "../shared/section-icon";
import { SectionIcon } from "../shared/section-icon";
export const CssSection = () => {
const { isDarkMode } = useTheme();
@ -24,7 +24,7 @@ export const CssSection = () => {
<header className="flex items-center justify-between">
<div className="flex items-center gap-x-4">
{getSectionIcon("css")}
<SectionIcon id="css" size={18} name={t`Custom CSS`} />
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Custom CSS`}</h2>
</div>
</header>

4
apps/client/src/pages/builder/sidebars/right/sections/export.tsx
View File

@ -7,7 +7,7 @@ import { saveAs } from "file-saver";
import { usePrintResume } from "@/client/services/resume/print";
import { useResumeStore } from "@/client/stores/resume";
import { getSectionIcon } from "../shared/section-icon";
import { SectionIcon } from "../shared/section-icon";
const onJsonExport = () => {
const { resume } = useResumeStore.getState();
@ -36,7 +36,7 @@ export const ExportSection = () => {
<section id="export" className="grid gap-y-6">
<header className="flex items-center justify-between">
<div className="flex items-center gap-x-4">
{getSectionIcon("export")}
<SectionIcon id="export" size={18} name={t`Export`} />
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Export`}</h2>
</div>
</header>

4
apps/client/src/pages/builder/sidebars/right/sections/information.tsx
View File

@ -10,7 +10,7 @@ import {
} from "@reactive-resume/ui";
import { cn } from "@reactive-resume/utils";
import { getSectionIcon } from "../shared/section-icon";
import { SectionIcon } from "../shared/section-icon";
const DonateCard = () => (
<Card className="space-y-4 bg-info text-info-foreground">
@ -113,7 +113,7 @@ export const InformationSection = () => {
<section id="information" className="grid gap-y-6">
<header className="flex items-center justify-between">
<div className="flex items-center gap-x-4">
{getSectionIcon("information")}
<SectionIcon id="information" size={18} name={t`Information`} />
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Information`}</h2>
</div>
</header>

4
apps/client/src/pages/builder/sidebars/right/sections/layout.tsx
View File

@ -27,7 +27,7 @@ import { useState } from "react";
import { useResumeStore } from "@/client/stores/resume";
import { getSectionIcon } from "../shared/section-icon";
import { SectionIcon } from "../shared/section-icon";
type ColumnProps = {
id: string;
@ -194,7 +194,7 @@ export const LayoutSection = () => {
<section id="layout" className="grid gap-y-6">
<header className="flex items-center justify-between">
<div className="flex items-center gap-x-4">
{getSectionIcon("layout")}
<SectionIcon id="layout" size={18} name={t`Layout`} />
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Layout`}</h2>
</div>

4
apps/client/src/pages/builder/sidebars/right/sections/notes.tsx
View File

@ -3,7 +3,7 @@ import { RichInput } from "@reactive-resume/ui";
import { useResumeStore } from "@/client/stores/resume";
import { getSectionIcon } from "../shared/section-icon";
import { SectionIcon } from "../shared/section-icon";
export const NotesSection = () => {
const setValue = useResumeStore((state) => state.setValue);
@ -13,7 +13,7 @@ export const NotesSection = () => {
<section id="notes" className="grid gap-y-6">
<header className="flex items-center justify-between">
<div className="flex items-center gap-x-4">
{getSectionIcon("notes")}
<SectionIcon id="notes" size={18} name={t`Notes`} />
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Notes`}</h2>
</div>
</header>

4
apps/client/src/pages/builder/sidebars/right/sections/page.tsx
View File

@ -12,7 +12,7 @@ import {
import { useResumeStore } from "@/client/stores/resume";
import { getSectionIcon } from "../shared/section-icon";
import { SectionIcon } from "../shared/section-icon";
export const PageSection = () => {
const setValue = useResumeStore((state) => state.setValue);
@ -22,7 +22,7 @@ export const PageSection = () => {
<section id="page" className="grid gap-y-6">
<header className="flex items-center justify-between">
<div className="flex items-center gap-x-4">
{getSectionIcon("page")}
<SectionIcon id="page" size={18} name={t`Page`} />
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Page`}</h2>
</div>
</header>

4
apps/client/src/pages/builder/sidebars/right/sections/sharing.tsx
View File

@ -7,7 +7,7 @@ import { useToast } from "@/client/hooks/use-toast";
import { useUser } from "@/client/services/user";
import { useResumeStore } from "@/client/stores/resume";
import { getSectionIcon } from "../shared/section-icon";
import { SectionIcon } from "../shared/section-icon";
export const SharingSection = () => {
const { user } = useUser();
@ -35,7 +35,7 @@ export const SharingSection = () => {
<section id="sharing" className="grid gap-y-6">
<header className="flex items-center justify-between">
<div className="flex items-center gap-x-4">
{getSectionIcon("sharing")}
<SectionIcon id="sharing" size={18} name={t`Sharing`} />
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Sharing`}</h2>
</div>
</header>

4
apps/client/src/pages/builder/sidebars/right/sections/statistics.tsx
View File

@ -7,7 +7,7 @@ import { AnimatePresence, motion } from "framer-motion";
import { useResumeStatistics } from "@/client/services/resume";
import { useResumeStore } from "@/client/stores/resume";
import { getSectionIcon } from "../shared/section-icon";
import { SectionIcon } from "../shared/section-icon";
export const StatisticsSection = () => {
const id = useResumeStore((state) => state.resume.id);
@ -19,7 +19,7 @@ export const StatisticsSection = () => {
<section id="statistics" className="grid gap-y-6">
<header className="flex items-center justify-between">
<div className="flex items-center gap-x-4">
{getSectionIcon("statistics")}
<SectionIcon id="statistics" size={18} name={t`Statistics`} />
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Statistics`}</h2>
</div>
</header>

4
apps/client/src/pages/builder/sidebars/right/sections/template.tsx
View File

@ -5,7 +5,7 @@ import { motion } from "framer-motion";
import { useResumeStore } from "@/client/stores/resume";
import { getSectionIcon } from "../shared/section-icon";
import { SectionIcon } from "../shared/section-icon";
export const TemplateSection = () => {
const setValue = useResumeStore((state) => state.setValue);
@ -15,7 +15,7 @@ export const TemplateSection = () => {
<section id="template" className="grid gap-y-6">
<header className="flex items-center justify-between">
<div className="flex items-center gap-x-4">
{getSectionIcon("template")}
<SectionIcon id="template" size={18} name={t`Template`} />
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Template`}</h2>
</div>
</header>

4
apps/client/src/pages/builder/sidebars/right/sections/theme.tsx
View File

@ -6,7 +6,7 @@ import { HexColorPicker } from "react-colorful";
import { colors } from "@/client/constants/colors";
import { useResumeStore } from "@/client/stores/resume";
import { getSectionIcon } from "../shared/section-icon";
import { SectionIcon } from "../shared/section-icon";
export const ThemeSection = () => {
const setValue = useResumeStore((state) => state.setValue);
@ -16,7 +16,7 @@ export const ThemeSection = () => {
<section id="theme" className="grid gap-y-6">
<header className="flex items-center justify-between">
<div className="flex items-center gap-x-4">
{getSectionIcon("theme")}
<SectionIcon id="theme" size={18} name={t`Theme`} />
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Theme`}</h2>
</div>
</header>

4
apps/client/src/pages/builder/sidebars/right/sections/typography.tsx
View File

@ -9,7 +9,7 @@ import webfontloader from "webfontloader";
import { useResumeStore } from "@/client/stores/resume";
import { getSectionIcon } from "../shared/section-icon";
import { SectionIcon } from "../shared/section-icon";
const fontSuggestions = [
"Open Sans",
@ -62,7 +62,7 @@ export const TypographySection = () => {
<section id="typography" className="grid gap-y-8">
<header className="flex items-center justify-between">
<div className="flex items-center gap-x-4">
{getSectionIcon("typography")}
<SectionIcon id="typography" size={18} name={t`Typography`} />
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Typography`}</h2>
</div>
</header>

11
apps/client/src/pages/builder/sidebars/right/shared/section-icon.tsx
View File

@ -16,7 +16,7 @@ import {
import type { ButtonProps } from "@reactive-resume/ui";
import { Button, Tooltip } from "@reactive-resume/ui";
export type MetadataKey =
type MetadataKey =
| "template"
| "layout"
| "typography"
@ -30,7 +30,7 @@ export type MetadataKey =
| "notes"
| "information";
export const getSectionIcon = (id: MetadataKey, props: IconProps = {}) => {
const getSectionIcon = (id: MetadataKey, props: IconProps = {}) => {
switch (id) {
// Left Sidebar
case "notes": {
@ -76,16 +76,17 @@ export const getSectionIcon = (id: MetadataKey, props: IconProps = {}) => {
}
};
type SectionIconProps = ButtonProps & {
type SectionIconProps = Omit<ButtonProps, "size"> & {
id: MetadataKey;
name: string;
size?: number;
icon?: React.ReactNode;
};
export const SectionIcon = ({ id, name, icon, ...props }: SectionIconProps) => (
export const SectionIcon = ({ id, name, icon, size = 14, ...props }: SectionIconProps) => (
<Tooltip side="left" content={name}>
<Button size="icon" variant="ghost" className="size-8 rounded-full" {...props}>
{icon ?? getSectionIcon(id, { size: 14 })}
{icon ?? getSectionIcon(id, { size })}
</Button>
</Tooltip>
);