style(lab):adjust ui

Author: oopserian

src/components/LabCard.tsx

@@ -19,7 +19,7 @@ export const LabCard: React.FC<LabCardProps> = ({ data }) => {
                 </div>
                 <div className="flex justify-between items-center">
                     <div className="flex flex-col gap-1 p-1 font-normal">
-                        <p className="text-zinc-200 text-sm">{en_title}</p>
+                        <p className="text-zinc-200 text-sm">{inDevelopment && '🚧'} {en_title}</p>
                         <div className="flex gap-1">
                             {
                                 tags.map(tag => (

src/data/labs/3d-hover-card/page.tsx

@@ -70,14 +70,14 @@ const Card: React.FC<CardProps> = ({ src, ...props }) => {
             transform: `perspective(500px) rotateX(${-y * 3}deg) rotateY(${x * 3}deg)`,
             transition: 'transform 0.2s ease-out',
             willChange: 'transform',
-        }} className={cn('group border border-zinc-700 rounded-xl overflow-hidden', props.className)}>
+        }} className={cn('group border border-neutral-400 rounded-xl overflow-hidden', props.className)}>
             <div style={{
                 transform: `translateX(${x * 4}px) translateY(${y * 4}px)`,
                 transition: 'transform 0.1s ease-out',
                 transitionProperty: 'transform,opacity',
                 willChange: 'transform',
             }} className="absolute top-0 left-0 w-full h-full pointer-events-none opacity-0 group-hover:opacity-100">
-                <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 inset-0 w-16 h-16 blur-lg bg-white/50 rounded-full"></div>
+                <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 inset-0 w-20 h-20 blur-lg bg-white/20 rounded-full"></div>
             </div>
             <img src={src} />
         </div>

src/data/labs/cd-widget/page.tsx

@@ -7,7 +7,8 @@ export default function CdWidget() {
     const [isPlay, setIsPlay] = useState<boolean>(false);
     return (
         <div className="flex items-center justify-center p-6">
-            <div className="relative flex flex-col w-48 h-48 overflow-hidden bg-zinc-300 rounded-3xl border border-zinc-600 shadow-lg">
+            <div className="relative flex flex-col w-48 h-48 overflow-hidden bg-zinc-300 rounded-3xl shadow-lg">
+                <div className="absolute pointer-events-none rounded-[inherit] z-10 top-0 left-0 w-full h-full border border-neutral-400/40"></div>
                 <div className="absolute w-full h-full blur-md opacity-30">
                     <img className="w-full h-full object-cover" src={cover} alt="jaychou" />
                 </div>

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

@@ -9,6 +9,7 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    overflow: hidden;
     gap: 1rem;
     padding: 2rem 1rem;
 

src/data/labs/data.json

@@ -46,19 +46,19 @@
     "css-toast": {
         "name": "css-toast",
         "inDevelopment": false,
-        "en_title": "CSS Toast 🚧",
+        "en_title": "CSS Toast",
         "origin_url": "",
-        "title": "css toast 🚧",
+        "title": "css toast",
         "tags": [
             "CSS"
         ]
     },
     "dnd-stack": {
         "name": "dnd-stack",
         "inDevelopment": true,
-        "en_title": "Dnd Stack 🚧",
+        "en_title": "Dnd Stack",
         "origin_url": "",
-        "title": "拖放和堆叠 🚧",
+        "title": "拖放和堆叠",
         "tags": [
             "Tailwind",
             "Motion"