svrjs/svrjs-nextjs-website
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

escape html prolly added

Browse source
This commit is contained in:
Cypro Freelance 2024-07-06 00:50:59 +05:30
parent 6dd363fa4a
commit d5ea4d06f4
3 changed files with 64 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
app/api/contact/route.ts
View file

@ -19,9 +19,10 @@ const generateEmailContent = (data: Record<string, string>) => {
const stringData = Object.entries(data).reduce( const stringData = Object.entries(data).reduce(
(str, [key, val]) => (str, [key, val]) =>
str + str +
`${CONTACT_MESSAGE_FIELDS[key] || escapeHtml(key)}: \n${escapeHtml( `${CONTACT_MESSAGE_FIELDS[key] || key}: ${val.replace(
val /\n/g,
)} \n\n`, "<br/>"
)} <br/><br/>`,
"" ""
); );

31
components/shared/Statistics.tsx
View file

@ -1,22 +1,21 @@
import { stats } from "@/constants"; import { stats } from "@/constants";
import NumTicker from "../widgets/num-tick"; import NumberTicker from "../widgets/num-tick";
const Statistics = () => { const Statistics = () => {
return ( return (
<section> <section>
<div className="grid grid-cols-2 lg:grid-cols-4 gap-8"> <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
{stats.map(({ title, count }) => ( {stats.map(({ title, count }) => (
<div key={title} className="space-y-2 text-center"> <div key={title} className="space-y-2 text-center">
<h2 className="text-3xl sm:text-4xl font-bold"> <h2 className="text-3xl sm:text-4xl font-bold">
{count} <NumberTicker value={count} />
{/* <NumTicker value={count} /> */} </h2>
</h2> <p className="text-xl text-muted-foreground">{title}</p>
<p className="text-xl text-muted-foreground">{title}</p> </div>
</div> ))}
))} </div>
</div> </section>
</section> );
);
}; };
export default Statistics; export default Statistics;

86
components/widgets/num-tick.tsx
View file

@ -1,51 +1,55 @@
"use client"; "use client";
import { useInView, useMotionValue, useSpring } from "framer-motion";
import { useEffect, useRef } from "react"; import { useEffect, useRef } from "react";
import { useInView, useMotionValue, useSpring } from "framer-motion";
export default function NumTicker({ import { cn } from "@/lib/utils";
value,
direction = "up", export default function NumberTicker({
delay = 0, value,
className, direction = "up",
delay = 0,
className,
}: { }: {
value: number; value: number;
direction?: "up" | "down"; direction?: "up" | "down";
className?: string; className?: string;
delay?: number; delay?: number; // delay in s
}) { }) {
const ref = useRef<HTMLSpanElement>(null); const ref = useRef<HTMLSpanElement>(null);
const motionValue = useMotionValue(direction === "down" ? value : 0); const motionValue = useMotionValue(direction === "down" ? value : 0);
const springValue = useSpring(motionValue, { const springValue = useSpring(motionValue, {
damping: 60, damping: 60,
stiffness: 100, stiffness: 100,
}); });
const isInView = useInView(ref, { once: true, margin: "0px" });
const isInView = useInView(ref, { once: true, margin: "0px" }); useEffect(() => {
isInView &&
setTimeout(() => {
motionValue.set(direction === "down" ? 0 : value);
}, delay * 1000);
}, [motionValue, isInView, delay, value, direction]);
useEffect(() => { useEffect(
isInView && () =>
setTimeout(() => { springValue.on("change", (latest) => {
motionValue.set(direction === "down" ? value : 0); if (ref.current) {
}, delay * 1000); ref.current.textContent = Intl.NumberFormat("en-US").format(
}, [motionValue, isInView, delay, value, direction]); latest.toFixed(0)
);
}
}),
[springValue]
);
useEffect( return (
() => <span
springValue.on("change", (latest) => { className={cn(
if (ref.current) { "inline-block tabular-nums text-black dark:text-white tracking-wider",
ref.current.textContent = Intl.NumberFormat("en-US").format( className
latest.toFixed(0) )}
); ref={ref}
} />
}), );
[springValue]
);
return (
<span
className={`inline-block tabular-nums text-black dark:text-white ${className}`}
ref={ref}
/>
);
} }