Skip to content

Commit

Permalink
refactor : renamed to lower-case
Browse files Browse the repository at this point in the history
  • Loading branch information
ad956 committed Jun 27, 2024
1 parent 5cce7cb commit 9f71e4a
Show file tree
Hide file tree
Showing 4 changed files with 134 additions and 4 deletions.
2 changes: 1 addition & 1 deletion app/components/headbar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { CiLogin } from "react-icons/ci";
import { GoPlus } from "react-icons/go";
import { User as UserType } from "@/types";
import { logoutAction } from "@lib/actions";
import Notifications from "../Notifications";
import Notifications from "../notifications";

type HeadbarProps = {
user: UserType;
Expand Down
4 changes: 1 addition & 3 deletions app/components/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,14 @@ import BrandLogo from "./brandlogo";
import Carousel from "./carousel";
import ErrorBoundary from "./error-boundary";
import Headbar from "./headbar";
// import Notifications from "./Notifications";
import OtpSection from "./otp";
import SpinnerLoader from "./SpinnerLoader";
import SpinnerLoader from "./spinnerloader";

export {
BrandLogo,
Carousel,
ErrorBoundary,
Headbar,
// Notifications,
OtpSection,
SpinnerLoader,
};
54 changes: 54 additions & 0 deletions app/components/notifications/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
"use client";

import { CiBellOn } from "react-icons/ci";
import {
NovuProvider,
PopoverNotificationCenter,
} from "@novu/notification-center";

export default function Notifications({ userId }: { userId: string }) {
return (
<NovuProvider
subscriberId={userId}
applicationIdentifier={process.env.NEXT_PUBLIC_NOVU_APP_IDENTIFIER || ""}
>
<PopoverNotificationCenter colorScheme={"light"}>
{({ unseenCount }) => <CustomBellIcon unseenCount={unseenCount} />}
</PopoverNotificationCenter>
</NovuProvider>
);
}

const CustomBellIcon = ({
unseenCount = 0,
}: {
unseenCount: number | undefined;
}) => {
return (
<CiBellOn
size={25}
color={unseenCount > 0 ? "red" : "black"}
style={{
cursor: "pointer",
}}
>
{unseenCount > 0 && (
<span
style={{
position: "absolute",
top: "50%",
right: "5px",
transform: "translateY(-50%)",
fontSize: "12px",
color: "white",
backgroundColor: "red",
borderRadius: "50%",
padding: "2px",
}}
>
{unseenCount}
</span>
)}
</CiBellOn>
);
};
78 changes: 78 additions & 0 deletions app/components/spinnerloader/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
"use client";
import { motion, useAnimate } from "framer-motion";
import { useEffect } from "react";

const SpinnerLoader: React.FC = () => {
const text: string = "Loading in progress. please wait";
const characters: string[] = text.split("");

const radius: number = 80;
const fontSize: string = "15px";
const letterSpacing: number = 10.5;
type AnimationStep = [
string,
{ opacity: number },
{ duration: number; at: string }
];
const [scope, animate] = useAnimate();

useEffect(() => {
const animateLoader = async () => {
const letterAnimation: AnimationStep[] = [];
characters.forEach((_, i) => {
letterAnimation.push([
`.letter-${i}`,
{ opacity: 0 },
{ duration: 0.3, at: i === 0 ? "+0.8" : "-0.28" },
]);
});
characters.forEach((_, i) => {
letterAnimation.push([
`.letter-${i}`,
{ opacity: 1 },
{ duration: 0.3, at: i === 0 ? "+0.8" : "-0.28" },
]);
});
animate(letterAnimation, {
repeat: Number.POSITIVE_INFINITY,
});
animate(
scope.current,
{ rotate: 360 },
{ duration: 4, repeat: Number.POSITIVE_INFINITY }
);
};
animateLoader();
}, [animate, scope, characters]);

const letter = "absolute top-0 left-[50%] text-black";
return (
<section className="h-full w-full flex justify-center items-center ">
<motion.div
ref={scope}
className="relative aspect-square"
style={{ width: radius * 2 }}
>
<p aria-label={text} />
<p aria-hidden="true">
{characters.map((ch, i) => (
<motion.span
// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
key={i}
className={`${letter} letter-${i}`}
style={{
transformOrigin: `0 ${radius}px`,
transform: `rotate(${i * letterSpacing}deg)`,
fontSize,
}}
>
{ch}
</motion.span>
))}
</p>
</motion.div>
</section>
);
};

export default SpinnerLoader;

0 comments on commit 9f71e4a

Please sign in to comment.