+
+
+
+ );
+}
diff --git a/src/app/templates/banner/page.tsx b/src/app/templates/banner/page.tsx
new file mode 100644
index 0000000..a54b900
--- /dev/null
+++ b/src/app/templates/banner/page.tsx
@@ -0,0 +1,5 @@
+import { PostGenerator } from "@/components/post-generator/post-generator";
+
+export default function Page() {
+ return + Escoge una plantilla +
+
- {assetsQuery?.isLoading &&
+
Loading...
} +
+ {assetsQuery?.isLoading && (
+ >();
const {
- posterForm,
topics: { topics, addTopic, removeTopic },
presenters: { presenters, addPresenter, removePresenter },
date,
setTime,
setDate,
- } = useContext(PosterContext);
+ } = useContext(TemplateContext);
+
+ const { register } = useFormContext();
const onSubmitContent = (data: Pick) => {
addTopic(data.topics);
@@ -63,7 +66,7 @@ export const ContentForm = () => {
{
{
void;
+ children: ReactNode;
}
-export const PostForm: FC = ({ onDownload }) => {
+export const PostForm: FC = ({ onDownload, children }) => {
+ const router = useRouter();
+
+ const { clearContext } = useContext(TemplateContext);
+
const handleDownload = () => {
onDownload();
};
+ const handleGoBack = () => {
+ clearContext();
+ router.back();
+ };
+
return (
-
+ Loading... +
+ )} + {!assetsQuery?.isLoading && assetsQuery?.isError && ( ++ Ocurrió un error al cargar los archivos +
+ )} {assetsQuery?.data && assetsQuery.data.map((asset, index) => (
+
+ );
+};
diff --git a/src/components/post-form/content-form.tsx b/src/components/post-form/content-form.tsx
index 131e61a..0f4ddb4 100644
--- a/src/components/post-form/content-form.tsx
+++ b/src/components/post-form/content-form.tsx
@@ -1,8 +1,10 @@
+"use client";
+
import { useContext } from "react";
-import { useForm } from "react-hook-form";
+import { useForm, useFormContext } from "react-hook-form";
import { MdAdd, MdRemove } from "react-icons/md";
-import { PosterContext } from "@/context/poster";
+import { TemplateContext } from "@/context/template-context";
import { Button } from "../ui/button";
import { DatePicker } from "../ui/date-picker";
@@ -39,13 +41,14 @@ export const ContentForm = () => {
} = useForm
+
@@ -44,14 +56,12 @@ export const PostForm: FC = ({ onDownload }) => {
>
Plantilla
-
Contenido
-
-
+ {children}
Recursos gráficos
@@ -72,26 +82,3 @@ export const PostForm: FC = ({ onDownload }) => {
);
};
-
-{
- /* >;
+ form: FC;
+}
+
+interface Props {
+ template: TemplateVariant;
+}
+
+const templates: Record = {
+ poster: {
+ name: "Poster",
+ template: Poster,
+ form: ContentForm,
+ },
+ banner: {
+ name: "Banner",
+ template: Banner,
+ form: BannerForm,
+ },
+ "poster-rev": {
+ name: "Poster 2.0",
+ template: PosterRevamped,
+ form: ContentForm,
+ },
+};
+
+export const PostGenerator: FC = ({ template }) => {
+ const postRef = useRef(null);
-export const PostGenerator = () => {
- const posterRef = useRef(null);
+ const postForm = useForm();
const handlePostDownload = async () => {
- if (posterRef.current === null) return;
+ if (postRef.current === null) return;
- const postLink = await toPng(posterRef.current, {
+ const { offsetHeight, offsetWidth } = postRef.current;
+
+ const postLink = await toPng(postRef.current, {
cacheBust: true,
- canvasWidth: 1080,
- canvasHeight: 1080,
+ canvasHeight: offsetHeight,
+ canvasWidth: offsetWidth,
+ pixelRatio: 1,
});
+ const now = new Date().getTime();
+
const downloadLink = document.createElement("a");
downloadLink.href = postLink;
- downloadLink.download = "poster.png";
+ downloadLink.download = `${template}-${now}.png`;
downloadLink.click();
};
+ const getCurrentTemplateOffset = () => {
+ if (postRef.current === null) return;
+
+ const { offsetWidth, offsetHeight } = postRef.current;
+
+ return {
+ width: offsetWidth,
+ height: offsetHeight,
+ };
+ };
+
+ const { form: Form, template: Template } = templates[template];
+
return (
-
-
+
+
+
+
+
+
+
+
);
};
diff --git a/src/components/post-viewer/post-viewer.tsx b/src/components/post-viewer/post-viewer.tsx
index af4da22..4b6572b 100644
--- a/src/components/post-viewer/post-viewer.tsx
+++ b/src/components/post-viewer/post-viewer.tsx
@@ -1,36 +1,18 @@
-/* eslint-disable @next/next/no-img-element */
-import Image from "next/image";
-import { FC, RefObject, useContext, useRef, useState } from "react";
-import { IoLocationSharp, IoCalendarClear, IoTimeSharp } from "react-icons/io5";
-import { Rnd } from "react-rnd";
-
-import { PosterContext } from "@/context/poster";
-import { cn } from "@/lib/utils";
-import { formatFullTemplateDate } from "@/utils/utils";
+"use client";
-import { SocialMedia } from "../social-media/social-media";
-import { colorItemVariants } from "../ui/color-item";
-import { NameEmphasis } from "../ui/name-emphasis";
-import { ScrollArea } from "../ui/scroll-area";
+/* eslint-disable @next/next/no-img-element */
+import { FC, ReactNode, useRef, useState } from "react";
import { ViewerControls } from "./viewer-controls";
+import { ScrollArea } from "../ui/scroll-area";
interface Props {
- postRef: RefObject;
+ children: ReactNode;
+ onFitToViewer: () => { height: number; width: number } | undefined;
}
-// TODO: Fix image download on mobile
-export const PostViewer: FC = ({ postRef }) => {
+export const PostViewer: FC = ({ onFitToViewer, children }) => {
const viewerRef = useRef(null);
- const {
- posterBg: { posterBg },
- topics: { topics },
- presenters: { presenters },
- assets: { assets },
- date,
- time,
- posterForm,
- } = useContext(PosterContext);
const [zoom, setZoom] = useState(1);
@@ -43,134 +25,38 @@ export const PostViewer: FC = ({ postRef }) => {
const { width, height } = viewerRef.current.getBoundingClientRect();
- setZoom(Math.min((width - 24) / 1080, (height - 24) / 1080));
+ const offset = onFitToViewer();
+
+ setZoom(
+ Math.min(
+ (width - 24) / (offset?.width ?? 1080),
+ (height - 24) / (offset?.height ?? 1080),
+ ),
+ );
};
const resetZoom = () => {
setZoom(1);
};
- const { bg: contextBg, text: contextText } = colorItemVariants[posterBg];
-
return (
-
-
Edita la plantilla
-
-
*/
-}
diff --git a/src/components/post-form/template-form.tsx b/src/components/post-form/template-form.tsx
deleted file mode 100644
index a4379bd..0000000
--- a/src/components/post-form/template-form.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { useContext } from "react";
-
-import { PosterContext } from "@/context/poster";
-
-import { ColorItem } from "../ui/color-item";
-
-export const TemplateForm = () => {
- const {
- posterBg: { posterBg },
- } = useContext(PosterContext);
-
- return (
-
-
- );
-};
diff --git a/src/components/post-generator/post-generator.tsx b/src/components/post-generator/post-generator.tsx
index f785648..c93eb12 100644
--- a/src/components/post-generator/post-generator.tsx
+++ b/src/components/post-generator/post-generator.tsx
@@ -1,31 +1,96 @@
+"use client";
+
import { toPng } from "html-to-image";
-import { useRef } from "react";
+import { FC, ForwardRefExoticComponent, RefAttributes, useRef } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import { ContentForm } from "../post-form/content-form";
import { PostForm } from "../post-form/post-form";
import { PostViewer } from "../post-viewer/post-viewer";
+import { TemplateVariant } from "../template-item/template-item";
+import { Banner } from "../templates/banner/banner";
+import { BannerForm, BannerFormInputs } from "../templates/banner/banner-form";
+import { Poster, PosterFormInputs } from "../templates/poster";
+import { PosterRevamped } from "../templates/poster-rev/poster-rev";
+
+type FormInputs = PosterFormInputs | BannerFormInputs;
+
+interface Template {
+ name: string;
+ template: ForwardRefExoticComponent
+
-
+ = {
facebook: = ({ variant, children }) => {
+const sizes: Record = {
+ xs: "text-lg",
+ base: "text-xl",
+ lg: "text-2xl",
+ xl: "text-3xl",
+ "2xl": "text-4xl",
+};
+
+export const SocialMedia: FC = ({
+ variant,
+ size = "base",
+ children,
+}) => {
return (
-
+
{icons[variant]}
= ({ variant, src, name }) => {
+ return (
+
+ ();
+
+ return (
+ <>
+ (function Banner(props, ref) {
+ const {
+ primaryColor: { color },
+ } = useContext(TemplateContext);
+ const { watch } = useFormContext();
+
+ const {
+ bg: contextBg,
+ text: contextText,
+ nameEmphasis,
+ nameEmphasisBg,
+ } = colorItemVariants[color];
+
+ return (
+ (
+ function PosterRevamped(props, ref) {
+ const {
+ assets: { assets },
+ topics: { topics },
+ presenters: { presenters },
+ primaryColor: { color },
+ date,
+ time,
+ } = useContext(TemplateContext);
+ const { watch } = useFormContext();
+
+ const {
+ bg: contextBg,
+ text: contextText,
+ nameEmphasis,
+ } = colorItemVariants[color];
+
+ return (
+ (function Poster(props, ref) {
+ const {
+ assets: { assets },
+ topics: { topics },
+ presenters: { presenters },
+ primaryColor: { color },
+ date,
+ time,
+ } = useContext(TemplateContext);
+ const { watch } = useFormContext();
+
+ const {
+ bg: contextBg,
+ text: contextText,
+ nameEmphasis,
+ } = colorItemVariants[color];
+
+ return (
+ = ({ onDownload }) => {
+ const handleDownload = () => {
+ onDownload();
+ };
+
+ return (
+ = {
@@ -25,18 +26,24 @@ export const colorItemVariants: Record = {
text: "text-primary-foreground",
nameEmphasis: "text-muted",
},
+ white: {
+ bg: "bg-white",
+ text: "text-primary",
+ nameEmphasis: "text-white",
+ nameEmphasisBg: "bg-primary",
+ },
// white: "bg-white text-muted",
// gray: "bg-gray-400 text-muted",
};
export const ColorItem: FC = ({ variant, selected }) => {
const {
- posterBg: { setPosterBg },
- } = useContext(PosterContext);
+ primaryColor: { setPrimaryColor },
+ } = useContext(TemplateContext);
return (
+
diff --git a/src/components/post-viewer/viewer-controls.tsx b/src/components/post-viewer/viewer-controls.tsx
index 28d5c76..b260bd0 100644
--- a/src/components/post-viewer/viewer-controls.tsx
+++ b/src/components/post-viewer/viewer-controls.tsx
@@ -1,3 +1,5 @@
+"use client";
+
import { FC } from "react";
import { IconContext } from "react-icons";
import { GrUndo } from "react-icons/gr";
diff --git a/src/components/social-media/social-media.tsx b/src/components/social-media/social-media.tsx
index be8fcc3..e075d90 100644
--- a/src/components/social-media/social-media.tsx
+++ b/src/components/social-media/social-media.tsx
@@ -8,6 +8,8 @@ import {
BsFacebook,
} from "react-icons/bs";
+import { cn } from "@/lib/utils";
+
type SocialMediaVariant =
| "twitter"
| "github"
@@ -15,8 +17,11 @@ type SocialMediaVariant =
| "instagram"
| "facebook";
+type Size = "xs" | "base" | "lg" | "xl" | "2xl";
+
interface Props {
variant: SocialMediaVariant;
+ size?: Size;
children: ReactNode;
}
@@ -28,10 +33,27 @@ const icons: Record
-
- {assets.map((asset, index) => (
-
- 
-
- ))}
-
- {posterForm?.watch("event")}
- )}
-
-
+ {children}
CSI PRO
- {posterForm && posterForm?.watch("event")?.length > 0 && ( -
-
-
- {posterForm && posterForm?.watch("title")?.length > 0 && (
-
- - {posterForm?.watch("title")} -
- )} -
-
- -
- {topics.map((topic, index) => (
-
-
-
> {topic}
-
- ))}
-
-
-
- Presentado por:
--
- {presenters.map((presenter, index) => (
-
-
-
> {presenter}
-
- ))}
-
-
-
- Ubicación y fecha
-
-
-
- {posterForm?.watch("location")}
- - {date && ( - -{formatFullTemplateDate(date)}
- - - )} - -{time} hrs
} - -
- @csipro.dev
- /csipro
- @csipro_dev
- /csi-pro
- /csipro.dev
-
- {children}
diff --git a/src/components/template-item/template-item.tsx b/src/components/template-item/template-item.tsx new file mode 100644 index 0000000..8edbce3 --- /dev/null +++ b/src/components/template-item/template-item.tsx @@ -0,0 +1,29 @@ +import Image from "next/image"; +import Link from "next/link"; +import { FC } from "react"; + +import { cn } from "@/lib/utils"; + +export type TemplateVariant = "poster" | "banner" | "poster-rev"; + +interface Props { + variant: TemplateVariant; + name: string; + src: string; +} + +export const TemplateItem: FC
+
+
+ );
+};
diff --git a/src/components/template-selector/template-selector.tsx b/src/components/template-selector/template-selector.tsx
new file mode 100644
index 0000000..8a36705
--- /dev/null
+++ b/src/components/template-selector/template-selector.tsx
@@ -0,0 +1,35 @@
+import { FC } from "react";
+
+import { TemplateItem } from "../template-item/template-item";
+
+export const TemplateSelector: FC = () => {
+ return (
+ {name}
+
+
+ );
+};
diff --git a/src/components/templates/banner/banner-form.tsx b/src/components/templates/banner/banner-form.tsx
new file mode 100644
index 0000000..7d40691
--- /dev/null
+++ b/src/components/templates/banner/banner-form.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import { useFormContext } from "react-hook-form";
+
+import { Input } from "../../ui/input";
+import { Label } from "../../ui/label";
+
+export interface BannerFormInputs {
+ title: string;
+}
+
+export const BannerForm = () => {
+ const { register } = useFormContext
+
+
+
+
+ );
+};
diff --git a/src/components/templates/banner/banner.tsx b/src/components/templates/banner/banner.tsx
new file mode 100644
index 0000000..11dc304
--- /dev/null
+++ b/src/components/templates/banner/banner.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+/* eslint-disable @next/next/no-img-element */
+import { forwardRef, useContext } from "react";
+import { useFormContext } from "react-hook-form";
+
+import { TemplateContext } from "@/context/template-context";
+import { cn } from "@/lib/utils";
+
+import { BannerFormInputs } from "./banner-form";
+import { colorItemVariants } from "../../ui/color-item";
+
+export interface PosterFormInputs {
+ name: string;
+}
+
+export const Banner = forwardRef
+
+ );
+});
diff --git a/src/components/templates/poster-rev/poster-rev.tsx b/src/components/templates/poster-rev/poster-rev.tsx
new file mode 100644
index 0000000..c7d471c
--- /dev/null
+++ b/src/components/templates/poster-rev/poster-rev.tsx
@@ -0,0 +1,143 @@
+/* eslint-disable @next/next/no-img-element */
+import Image from "next/image";
+import { forwardRef, useContext } from "react";
+import { useFormContext } from "react-hook-form";
+import { IoPerson } from "react-icons/io5";
+import { Rnd } from "react-rnd";
+
+import { SocialMedia } from "@/components/social-media/social-media";
+import { colorItemVariants } from "@/components/ui/color-item";
+import { NameEmphasis } from "@/components/ui/name-emphasis";
+import { TemplateContext } from "@/context/template-context";
+import { cn } from "@/lib/utils";
+import { formatFullTemplateDate } from "@/utils/utils";
+
+export interface PosterFormInputs {
+ event: string;
+ title: string;
+ topics: string;
+ presenters: string;
+ location: string;
+ time: string;
+}
+
+export const PosterRevamped = forwardRefCSI PRO
++ {watch("title")} +
+
+ {assets.map((asset, index) => (
+
+
+
+ ))}
+
+ {watch("event")}
+ )}
+
+
+ );
+ },
+);
diff --git a/src/components/templates/poster.tsx b/src/components/templates/poster.tsx
index e2df12f..6f2b07c 100644
--- a/src/components/templates/poster.tsx
+++ b/src/components/templates/poster.tsx
@@ -1 +1,224 @@
-export const Poster = () => {};
\ No newline at end of file
+"use client";
+
+/* eslint-disable @next/next/no-img-element */
+import Image from "next/image";
+import Link from "next/link";
+import { FC, forwardRef, useContext } from "react";
+import { useFormContext } from "react-hook-form";
+import { BiArrowBack } from "react-icons/bi";
+import {
+ IoCalendarClear,
+ IoLocationSharp,
+ IoTimeSharp,
+ IoPerson,
+} from "react-icons/io5";
+import { Rnd } from "react-rnd";
+
+import { TemplateContext } from "@/context/template-context";
+import { cn } from "@/lib/utils";
+import { formatFullTemplateDate } from "@/utils/utils";
+
+import { AssetsForm } from "../post-form/assets-form";
+import { ConfigForm } from "../post-form/config-form";
+import { ContentForm } from "../post-form/content-form";
+import { SocialMedia } from "../social-media/social-media";
+import {
+ Accordion,
+ AccordionContent,
+ AccordionItem,
+ AccordionTrigger,
+} from "../ui/accordion";
+import { Button } from "../ui/button";
+import { colorItemVariants } from "../ui/color-item";
+import { NameEmphasis } from "../ui/name-emphasis";
+import { ScrollArea } from "../ui/scroll-area";
+
+export interface PosterFormInputs {
+ event: string;
+ title: string;
+ topics: string;
+ presenters: string;
+ location: string;
+ time: string;
+}
+
+export const Poster = forwardRefCSI PRO
+ {watch("event")?.length > 0 && ( ++ {watch("title")} +
+ )} +-
+ {topics.map((topic, index) => (
+
-
+
> {topic}
+
+ ))}
+
+
+ Presentado por:
+-
+ {presenters.map((presenter, index) => (
+
-
+
+ {presenter}
+
+ ))}
+
+
+
+
+ {date && (
+
+
+ {formatFullTemplateDate(date)}
+ + )} + {(time || !!watch("location")) && ( + + {time && time.length > 0 &&{time} hrs -
} +{watch("location")}
+ + )} + + UNIVERSIDAD DE SONORA + +
+
+ @csipro.dev
+
+
+ @csipro_dev
+
+
+ /csipro.dev
+
+
+
+ {assets.map((asset, index) => (
+
+
+
+ ))}
+
+ {watch("event")}
+ )}
+
+
+ );
+});
+
+interface PostFormProps {
+ onDownload: () => void;
+}
+
+export const PostForm: FCCSI PRO
+ {watch("event")?.length > 0 && ( +
+
+
+ {watch("title")?.length > 0 && (
+
+ + {watch("title")} +
+ )} +
+
+ -
+ {topics.map((topic, index) => (
+
-
+
> {topic}
+
+ ))}
+
+
+
+ Presentado por:
+-
+ {presenters.map((presenter, index) => (
+
-
+
+ {presenter}
+
+ ))}
+
+
+
+ Ubicación y fecha
+
+
+
+ {watch("location")}
+ + {date && ( + +{formatFullTemplateDate(date)}
+ + )} + +{time} hrs
} + +
+ @csipro.dev
+ /csipro
+ @csipro_dev
+ /csi-pro
+ /csipro.dev
+
+
+
+
+
+ );
+};
diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx
index 3967174..8bb7ab3 100644
--- a/src/components/ui/calendar.tsx
+++ b/src/components/ui/calendar.tsx
@@ -50,8 +50,12 @@ function Calendar({
...classNames,
}}
components={{
- IconLeft: ({ ...props }) =>
+
+
+ Plantilla
+
+
+
+
+ Contenido
+
+
+
+
+ Recursos gráficos
+
+
+
+
+
+
+
+
+
+ Edita la plantilla
+ {}
@@ -12,14 +12,14 @@ const Input = React.forwardRef(
type={type}
className={cn(
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
- className
+ className,
)}
ref={ref}
{...props}
/>
- )
- }
-)
-Input.displayName = "Input"
+ );
+ },
+);
+Input.displayName = "Input";
-export { Input }
+export { Input };
diff --git a/src/components/ui/name-emphasis.tsx b/src/components/ui/name-emphasis.tsx
index 16abdf5..b3e9221 100644
--- a/src/components/ui/name-emphasis.tsx
+++ b/src/components/ui/name-emphasis.tsx
@@ -1,6 +1,8 @@
+"use client";
+
import { FC, ReactNode, useContext } from "react";
-import { PosterContext } from "@/context/poster";
+import { TemplateContext } from "@/context/template-context";
import { cn } from "@/lib/utils";
import { colorItemVariants } from "./color-item";
@@ -12,7 +14,7 @@ interface Props {
export const FullNameEmphasis: FC = ({ children }) => {
return (
{children}
@@ -22,14 +24,15 @@ export const FullNameEmphasis: FC = ({ children }) => {
export const NameEmphasis: FC = ({ children }) => {
const {
- posterBg: { posterBg },
- } = useContext(PosterContext);
+ primaryColor: { color },
+ } = useContext(TemplateContext);
return (
{children}
diff --git a/src/context/react-query.tsx b/src/context/react-query.tsx
new file mode 100644
index 0000000..02a360c
--- /dev/null
+++ b/src/context/react-query.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import { ReactNode } from "react";
+import { QueryClient, QueryClientProvider } from "react-query";
+import { ReactQueryDevtools } from "react-query/devtools";
+
+const queryClient = new QueryClient();
+
+export const ReactQueryProvider = ({ children }: { children: ReactNode }) => {
+ return (
+
CSI PRO
{children}
diff --git a/src/context/react-query.tsx b/src/context/react-query.tsx
new file mode 100644
index 0000000..02a360c
--- /dev/null
+++ b/src/context/react-query.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import { ReactNode } from "react";
+import { QueryClient, QueryClientProvider } from "react-query";
+import { ReactQueryDevtools } from "react-query/devtools";
+
+const queryClient = new QueryClient();
+
+export const ReactQueryProvider = ({ children }: { children: ReactNode }) => {
+ return (
+
+ {children}
+
+ );
+};
diff --git a/src/context/poster.tsx b/src/context/template-context.tsx
similarity index 55%
rename from src/context/poster.tsx
rename to src/context/template-context.tsx
index f85ba46..590a0a4 100644
--- a/src/context/poster.tsx
+++ b/src/context/template-context.tsx
@@ -1,18 +1,49 @@
+"use client";
+
import { FC, ReactNode, createContext, useState } from "react";
import type { SelectSingleEventHandler } from "react-day-picker";
-import { UseFormReturn, useForm } from "react-hook-form";
-import { useQuery, type UseQueryResult } from "react-query";
+import { FormProvider, useForm } from "react-hook-form";
+import { UseQueryResult, useQuery } from "react-query";
import { Asset } from "@/components/asset-item/asset-item";
-import type { ContentFormInputs } from "@/components/post-form/content-form";
+import { ContentForm } from "@/components/post-form/content-form";
+import { Banner } from "@/components/templates/banner/banner";
+import {
+ BannerForm,
+ BannerFormInputs,
+} from "@/components/templates/banner/banner-form";
+import { Poster, PosterFormInputs } from "@/components/templates/poster";
import { colorItemVariants } from "@/components/ui/color-item";
-interface PosterContextProps {
- posterForm?: UseFormReturn;
+export type TemplateVariants = "poster" | "banner";
+
+export interface Template {
+ name: string;
+ template: FC;
+ form: FC;
+}
+
+export const templates: Record = {
+ poster: {
+ name: "Poster",
+ template: Poster,
+ form: ContentForm,
+ },
+ banner: {
+ name: "Banner",
+ template: Banner,
+ form: BannerForm,
+ },
+};
+
+interface TemplateContextProps {
+ clearContext: () => void;
+ template?: TemplateVariants;
+ setTemplate: (template: TemplateVariants) => void;
assetsQuery?: UseQueryResult;
- posterBg: {
- posterBg: keyof typeof colorItemVariants;
- setPosterBg: (color: keyof typeof colorItemVariants) => void;
+ primaryColor: {
+ color: keyof typeof colorItemVariants;
+ setPrimaryColor: (color: keyof typeof colorItemVariants) => void;
};
topics: {
topics: string[];
@@ -38,45 +69,53 @@ interface PosterContextProps {
setDate: SelectSingleEventHandler;
}
-export const PosterContext = createContext({
- posterBg: { posterBg: "primary", setPosterBg: (color) => {} },
+export const TemplateContext = createContext({
+ clearContext: () => {},
+ setTemplate: (_) => {},
+ primaryColor: {
+ color: "primary",
+ setPrimaryColor: (_) => {},
+ },
topics: {
topics: [],
- addTopic: (topic) => {},
- removeTopic: (topic) => {},
- setTopics: (topics) => {},
+ addTopic: (_) => {},
+ removeTopic: (_) => {},
+ setTopics: (_) => {},
},
presenters: {
presenters: [],
- addPresenter: (presenter) => {},
- removePresenter: (presenter) => {},
- setPresenters: (presenters) => {},
+ addPresenter: (_) => {},
+ removePresenter: (_) => {},
+ setPresenters: (_) => {},
},
assets: {
assets: [],
- addAsset: (asset) => {},
- removeAsset: (asset) => {},
- setAssets: (assets) => {},
+ addAsset: (_) => {},
+ removeAsset: (_) => {},
+ setAssets: (_) => {},
},
date: new Date(),
setDate: () => {},
});
const getAssets = async () => {
- const res = await fetch("/api/images");
+ const res = await fetch("/api/assets");
+ console.log(res);
const data = (await res.json()) as Asset[];
+ console.log(data);
return data;
};
-export const PosterContextProvider: FC<{ children: ReactNode }> = ({
- children,
-}) => {
+export const TemplateProvider: FC<{ children: ReactNode }> = ({ children }) => {
const assetsQuery = useQuery({ queryKey: ["assets"], queryFn: getAssets });
- const [posterBg, setPosterBg] =
+ const [template, setTemplate] = useState("poster");
+ const [primaryColor, setPrimaryColor] =
useState("primary");
+ const form = useForm();
+
const [topics, setTopics] = useState([]);
const [presenters, setPresenters] = useState([]);
const [assets, setAssets] = useState([]);
@@ -84,8 +123,6 @@ export const PosterContextProvider: FC<{ children: ReactNode }> = ({
const [date, setDate] = useState();
const [time, setTime] = useState();
- const posterForm = useForm();
-
const addTopic = (topic: string) => {
if (!topic) return;
@@ -120,12 +157,24 @@ export const PosterContextProvider: FC<{ children: ReactNode }> = ({
setAssets((prevAssets) => prevAssets.filter((a) => a.key !== assetKey));
};
- const providerValue = {
- posterForm,
+ const clearContext = () => {
+ setTemplate("poster");
+ setPrimaryColor("primary");
+ setTopics([]);
+ setPresenters([]);
+ setAssets([]);
+ setDate(undefined);
+ setTime(undefined);
+ };
+
+ const value = {
+ clearContext,
+ template,
+ setTemplate,
assetsQuery,
- posterBg: {
- posterBg,
- setPosterBg,
+ primaryColor: {
+ color: primaryColor,
+ setPrimaryColor,
},
topics: {
topics,
@@ -152,8 +201,8 @@ export const PosterContextProvider: FC<{ children: ReactNode }> = ({
};
return (
-
- {children}
-
+
+ {children}
+
);
};
diff --git a/src/hooks/.gitkeep b/src/hooks/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index ec79801..365058c 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,6 +1,6 @@
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
-
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
export function cn(...inputs: ClassValue[]) {
- return twMerge(clsx(inputs))
+ return twMerge(clsx(inputs));
}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
deleted file mode 100644
index 5d687fd..0000000
--- a/src/pages/_app.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-/* eslint-disable check-file/filename-naming-convention */
-import "@/styles/globals.css";
-import type { AppProps } from "next/app";
-import { QueryClient, QueryClientProvider } from "react-query";
-import { ReactQueryDevtools } from "react-query/devtools";
-
-import { PosterContextProvider } from "@/context/poster";
-
-const queryClient = new QueryClient();
-
-export default function App({ Component, pageProps }: AppProps) {
- return (
-
-
-
-
- );
-}
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
deleted file mode 100644
index 108deac..0000000
--- a/src/pages/_document.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-/* eslint-disable check-file/filename-naming-convention */
-import { Html, Head, Main, NextScript } from "next/document";
-
-export default function Document() {
- return (
-
-
-
-
-
-
- );
-}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
deleted file mode 100644
index f6a715d..0000000
--- a/src/pages/index.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Poppins } from "next/font/google";
-import Link from "next/link";
-import { FC, ReactNode } from "react";
-
-import { FullNameEmphasis } from "@/components/ui/name-emphasis";
-
-const poppins = Poppins({ weight: ["400", "700"], subsets: ["latin"] });
-
-export default function Home() {
- return (
-
- POST GENERATOR
-
-
- Selecciona el tipo de post que quieres generar
-
- Posters
- Redes sociales
-
-
- );
-}
-
-interface LinkProps {
- href: string;
- children: ReactNode;
-}
-
-const HomeScreenLink: FC = ({ href, children }) => {
- return (
-
- {children}
-
- );
-};
diff --git a/src/server/uploadthing.ts b/src/server/uploadthing.ts
deleted file mode 100644
index b8f35ce..0000000
--- a/src/server/uploadthing.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// import type { NextApiRequest, NextApiResponse } from "next";
-import { createUploadthing, type FileRouter } from "uploadthing/next-legacy";
-
-const f = createUploadthing();
-
-export const ourFileRouter = {
- imageUploader: f({ image: { maxFileSize: "4MB" } }).onUploadComplete(
- async ({ metadata, file }) => {
- console.log("Upload complete: ", metadata);
- console.log("File URL: ", file.url);
- },
- ),
-} satisfies FileRouter;
-
-export type OurFileRouter = typeof ourFileRouter;
diff --git a/src/utils/uploadthing.ts b/src/utils/uploadthing.ts
index b4a0972..06036f1 100644
--- a/src/utils/uploadthing.ts
+++ b/src/utils/uploadthing.ts
@@ -1,6 +1,6 @@
import { generateComponents } from "@uploadthing/react";
-import type { OurFileRouter } from "@/server/uploadthing";
+import { OurFileRouter } from "@/app/api/uploadthing/core";
export const { UploadButton, UploadDropzone, Uploader } =
generateComponents();
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 62021ec..a82a59c 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -1,3 +1,4 @@
+/* eslint-disable import/no-duplicates */
import { format } from "date-fns";
import { es } from "date-fns/locale";
diff --git a/tailwind.config.ts b/tailwind.config.ts
index b1e1e1b..3b32db8 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -17,10 +17,13 @@ module.exports = withUt({
"2xl": "1400px",
},
},
- fontFamily: {
- sans: ["Poppins", "sans-serif"],
- },
extend: {
+ backgroundOpacity: ["active"],
+ fontFamily: {
+ sans: ["var(--font-sans)"],
+ mono: ["var(--font-mono)"],
+ roboto: ["var(--font-roboto)"],
+ },
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
diff --git a/tsconfig.json b/tsconfig.json
index 3ca6a9a..8392698 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,11 @@
{
"compilerOptions": {
"target": "es5",
- "lib": ["dom", "dom.iterable", "esnext"],
+ "lib": [
+ "dom",
+ "dom.iterable",
+ "esnext"
+ ],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
@@ -14,9 +18,23 @@
"jsx": "preserve",
"incremental": true,
"paths": {
- "@/*": ["./src/*"]
- }
+ "@/*": [
+ "./src/*"
+ ]
+ },
+ "plugins": [
+ {
+ "name": "next"
+ }
+ ]
},
- "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
- "exclude": ["node_modules"]
+ "include": [
+ "next-env.d.ts",
+ "**/*.ts",
+ "**/*.tsx",
+ ".next/types/**/*.ts"
+ ],
+ "exclude": [
+ "node_modules"
+ ]
}
- Posters
- Redes sociales
-
-