✨ Add new modern glassy alert component

damien-schneider · Sep 16, 2024 · 8a87143 · 8a87143
1 parent 901b152
commit 8a87143
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 1 deletion.
diff --git a/src/components/full-component.tsx b/src/components/full-component.tsx
@@ -375,7 +375,7 @@ const getCodeToDisplay = (
   const code = componentList[selectedVariant - 1]?.previewCode;
 
   if (code) {
-    console.log(code);
+    // console.log(code);
     return code;
   }
 

diff --git a/src/lib/cuicui-components/application-ui-components.tsx b/src/lib/cuicui-components/application-ui-components.tsx
@@ -1,5 +1,6 @@
 import {
   AlertCircleIcon,
+  BatteryChargingIcon,
   Code2Icon,
   CommandIcon,
   FingerprintIcon,
@@ -15,9 +16,12 @@ import {
 import AuthenticationPreviewImage from "#/src/assets/components-preview/authentication.jpeg";
 import TableOfContentPreviewImage from "#/src/assets/components-preview/table-of-content.png";
 import type { CategoryType } from "#/src/lib/types/component";
+import ModernGlassyAlert from "#/src/ui/cuicui/application-ui/alert/modern-glassy-alert/modern-glassy-alert";
+import PreviewModernGlassyAlert from "#/src/ui/cuicui/application-ui/alert/modern-glassy-alert/preview-modern-glassy-alert";
 import SimpleAlert from "#/src/ui/cuicui/application-ui/alert/simple-alert/simple-alert";
 import HalfSidedGlassMorphismAuthentication from "#/src/ui/cuicui/application-ui/authentication/half-sided-glassmorphism/variant1";
 import FloatingGrowingBannerVariant1 from "#/src/ui/cuicui/application-ui/banners/floating-growing-banner/variant1";
+import { PreviewBatteryIndicator } from "#/src/ui/cuicui/application-ui/battery/battery-indicator/preview-battery-indicator";
 import CodeEditor from "#/src/ui/cuicui/application-ui/code/code-card/code-card";
 import { CodeCardPreview } from "#/src/ui/cuicui/application-ui/code/code-card/code-card-preview";
 import PreviewCommandVariant1 from "#/src/ui/cuicui/application-ui/code/code-snippet/preview-variant1";
@@ -46,6 +50,7 @@ export const applicationUICategoriesList: CategoryType[] = [
     },
     componentList: [
       {
+        lastUpdatedDateComponent: new Date("2024-08-29"),
         isIframed: true,
         sizePreview: "sm",
         slug: "simple-alert",
@@ -59,6 +64,22 @@ export const applicationUICategoriesList: CategoryType[] = [
         title: "Simple Alert",
         description: "A simple alert component.",
       },
+      {
+        isIframed: true,
+        sizePreview: "sm",
+        slug: "modern-glassy-alert",
+        lastUpdatedDateComponent: new Date("2024-09-16"),
+        variantList: [
+          {
+            name: "variant1",
+            component: <PreviewModernGlassyAlert />,
+            slugPreviewFile: "preview-modern-glassy-alert",
+            slugComponentFile: "modern-glassy-alert",
+          },
+        ],
+        title: "Modern Glassy Alert",
+        description: "A modern glassy alert component.",
+      },
     ],
   },
   {
@@ -116,6 +137,34 @@ export const applicationUICategoriesList: CategoryType[] = [
       },
     ],
   },
+  {
+    slug: "battery",
+    name: "Battery",
+    description: "Battery components",
+    releaseDateCategory: new Date("2024-08-21"),
+    icon: BatteryChargingIcon,
+    previewCategory: {
+      component: <PreviewBatteryIndicator />,
+      previewScale: 1,
+    },
+    componentList: [
+      {
+        isIframed: false,
+        sizePreview: "sm",
+        slug: "battery-indicator",
+        variantList: [
+          {
+            name: "Battery Indicator",
+            component: <PreviewBatteryIndicator />,
+            slugPreviewFile: "preview-battery-indicator",
+            slugComponentFile: "battery-indicator",
+          },
+        ],
+        title: "Battery Indicator",
+        description: "A battery indicator component.",
+      },
+    ],
+  },
   {
     slug: "code",
     name: "Code",

diff --git a/src/ui/cuicui/application-ui/alert/modern-glassy-alert/modern-glassy-alert.tsx b/src/ui/cuicui/application-ui/alert/modern-glassy-alert/modern-glassy-alert.tsx
@@ -0,0 +1,46 @@
+import { XIcon } from "lucide-react";
+import { cn } from "#/src/utils/cn";
+
+import type { HTMLAttributes } from "react";
+
+interface ModernGlassyAlertProps extends HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  badge?: string;
+  children?: React.ReactNode;
+  href?: string;
+}
+
+export default function ModernGlassyAlert({
+  className,
+  badge,
+  children,
+  href,
+  ...props
+}: Readonly<ModernGlassyAlertProps>) {
+  return (
+    <div className="pointer-events-none fixed inset-x-0 bottom-0 z-10 sm:flex sm:justify-center sm:px-6 sm:pb-5 lg:px-8">
+      <div
+        className={cn(
+          "pointer-events-auto flex items-center justify-between gap-x-6 bg-black/25 px-6 py-2.5 backdrop-blur-md sm:rounded-xl sm:py-3 sm:pl-4 sm:pr-3.5",
+          className,
+        )}
+        {...props}
+      >
+        <p className="text-sm leading-6 text-white">
+          <a href={href}>
+            {children}
+            {badge && (
+              <span className="ml-1 cursor-pointer rounded-full bg-white px-2 py-0.5 text-sm font-medium text-black">
+                {badge}
+              </span>
+            )}
+          </a>
+        </p>
+        <button type="button" className="-m-1.5 flex-none p-1.5">
+          <span className="sr-only">Dismiss</span>
+          <XIcon className="size-5 text-white" />
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/ui/cuicui/application-ui/alert/modern-glassy-alert/preview-modern-glassy-alert.tsx b/src/ui/cuicui/application-ui/alert/modern-glassy-alert/preview-modern-glassy-alert.tsx
@@ -0,0 +1,12 @@
+import ModernGlassyAlert from "#/src/ui/cuicui/application-ui/alert/modern-glassy-alert/modern-glassy-alert";
+
+export default function PreviewModernGlassyAlert() {
+  return (
+    <ModernGlassyAlert
+      badge="Cuicui 🐤"
+      href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+    >
+      The new alert component is now available! Check it out!
+    </ModernGlassyAlert>
+  );
+}