Code architecture in one clear view

import { cn } from "@/lib/utils";
import clsx from  "clsx";
import { PropsWithChildren } from "react";

type NoteProps = PropsWithChildren & {
 title?: string;
 type?: "note" | "danger" | "warning" | "success";
 className?: string;
 };

export default function Note({
 children,
 title = "Note",
 type = "note",
 className,
 }: NoteProps ) {
 const noteClassNames = clsx({
 "dark:bg-stone-950/25 bg-stone-50": type == "note",
 "dark:bg-red-950 bg-red-100 border-red-200 dark:border-red-900":
 type === "danger",
 "dark:bg-orange-950 bg-orange-100 border-orange-200 dark:border-orange-900":
 type === "warning",
 "dark:bg-green-950 bg-green-100 border-green-200 dark:border-green-900":
 type === "success",
  });