feat(lab):css toast

Author: oopserian

src/data/labs/css-toast/page.tsx

@@ -0,0 +1,66 @@
+import { useEffect, useState } from "react";
+import "./style.css";
+
+interface Toast {
+    id: number;
+    title: string;
+    content: string;
+}
+
+const MAX_TOAST = 4;
+const INITIAL_TOASTS: Toast[] = Array.from({ length: 4 }, (_, i) => ({
+    id: i,
+    title: `toast - ${i}`,
+    content: "here is the content"
+}));
+
+
+export default function CssToast() {
+    const [toastList, setToastList] = useState<Toast[]>(INITIAL_TOASTS);
+    const [index, setIndex] = useState(4);
+
+    const addToast = () => {
+        setIndex(index => index + 1);
+        const toast: Toast = {
+            id: index,
+            title: "toast - " + index,
+            content: "here is the content"
+        };
+        setToastList(prev => [...prev, toast]);
+        if (toastList.length > MAX_TOAST) {
+            setToastList(prev => prev.slice(1));
+        };
+    };
+
+    return (
+        <div className="css-toast-wrap">
+            <ul className="toast-list">
+                {
+                    toastList.map((toast, index) => (
+                        <Toast key={toast.id} index={toastList.length - index - 1} toast={toast} />
+                    ))
+                }
+            </ul>
+            <button onClick={addToast}>Add toast</button>
+        </div>
+    )
+}
+
+const Toast = ({ index, toast }: { index: number, toast: Toast }) => {
+    const [show, setShow] = useState(false);
+
+    const style = {
+        ["--index" as string]: index
+    };
+
+    useEffect(() => {
+        setShow(true);
+    }, []);
+
+    return (
+        <li style={style} className={`${show ? "show" : ""} ${index >= MAX_TOAST ? "hide" : ""}`}>
+            <p>{toast.title}</p>
+            <span>{toast.content}</span>
+        </li>
+    )
+}

src/data/labs/css-toast/style.css

@@ -0,0 +1,82 @@
+.css-toast-wrap {
+    --border-color: #d1d5db;
+    --bg-color: #f3f4f6;
+    --font-color: #000;
+    width: 100%;
+    height: 100%;
+    min-height: 14rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+    padding: 2rem 1rem;
+
+    button {
+        background: var(--bg-color);
+        border: 1px solid var(--border-color);
+        border-radius: 0.5rem;
+        padding: 0.5rem 1rem;
+        cursor: pointer;
+        color: var(--font-color);
+        font-size: 0.875rem;
+        border: 1px solid var(--border-color);
+        transition: .3s ease transform;
+
+        &:active{
+            transform: scale(0.98);
+        }
+    }
+
+    .toast-list {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+        width: 80%;
+        height: 100%;
+        --gap: -80%;
+
+        &:hover {
+            --gap: 0.5rem;
+
+            li.show {
+                transform: translateY(calc(var(--index) * (100% + var(--gap)) * -1)) scale(1);
+            }
+        }
+
+        li {
+            position: absolute;
+            background: var(--bg-color);
+            color: var(--font-color);
+            width: 100%;
+            padding: 0.75rem 1rem;
+            bottom: 0;
+            left: 0;
+            gap: 1rem;
+            border-radius: 0.5rem;
+            border: 1px solid var(--border-color);
+            box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
+            opacity: 0;
+            transform: perspective(1000px) translateY(50%) scale(1.1) rotateX(45deg);
+            transition: transform .5s ease, opacity .3s ease;
+            will-change: transform;
+            font-size: 0.75rem;
+
+            span {
+                opacity: 0.5;
+            }
+
+            &.show {
+                opacity: 1;
+                transform: translateY(calc(var(--index) * (100% + var(--gap)) * -1)) scale(calc(1 - var(--index) * 0.05));
+            }
+
+            &.hide {
+                opacity: 0;
+                transform: scale(calc(1 - var(--index) * 0.05));
+                transition: 0.3s ease-in;
+            }
+        }
+    }
+}

src/data/labs/data.json

@@ -43,6 +43,16 @@
             "TypeScript"
         ]
     },
+    "css-toast": {
+        "name": "css-toast",
+        "inDevelopment": false,
+        "en_title": "CSS Toast 🚧",
+        "origin_url": "",
+        "title": "css toast 🚧",
+        "tags": [
+            "CSS"
+        ]
+    },
     "dnd-stack": {
         "name": "dnd-stack",
         "inDevelopment": true,