Fix light theme, fix animation bugs, add programmatic scrolling, improve custom card blog component

components/content/Card.vue

@@ -11,7 +11,7 @@ import ideaIcon from '~/assets/images/icons/accent/idea.png'
 type IconOptions = 'warning' | 'error' | 'info' | 'help' | 'checkmark' | 'idea'
 
 const props = defineProps({
-  icon: {
+  type: {
     type: String as PropType<IconOptions>,
     default: 'warning',
   },
@@ -21,42 +21,49 @@ const props = defineProps({
   },
 })
 
-let cardIcon = warningIcon
-let color = 'rgb(255 246 147 / 60%)'
-
-switch (props.icon) {
-  case 'error':
-    cardIcon = errorIcon
-    color = 'rgb(255 113 113 / 60%)'
-    break
-
-  case 'info':
-    cardIcon = infoIcon
-    color = 'rgb(94 162 255 / 60%)'
-
-    break
-
-  case 'help':
-    cardIcon = helpIcon
-    color = 'rgb(178 104 255 / 60%)'
-
-    break
-
-  case 'checkmark':
-    cardIcon = checkIcon
-    color = 'rgb(69 255 255 / 60%)'
-
-    break
-
-  case 'idea':
-    cardIcon = ideaIcon
-    color = 'rgb(255 255 255 / 60%)'
-
-    break
-
-  case 'warning':
-  default:
-    break
+const cards = {
+  warning: {
+    color: 'border-warning',
+    icon: {
+      src: warningIcon,
+      alt: 'Warning triangle',
+    },
+  },
+  error: {
+    color: 'border-error',
+    icon: {
+      src: errorIcon,
+      alt: 'Error circle',
+    },
+  },
+  info: {
+    color: 'border-info',
+    icon: {
+      src: infoIcon,
+      alt: 'Information circle',
+    },
+  },
+  help: {
+    color: 'border-help',
+    icon: {
+      src: helpIcon,
+      alt: 'Help circle',
+    },
+  },
+  checkmark: {
+    color: 'border-checkmark',
+    icon: {
+      src: checkIcon,
+      alt: 'Checkmark',
+    },
+  },
+  idea: {
+    color: 'border-idea',
+    icon: {
+      src: ideaIcon,
+      alt: 'Lightbulb',
+    },
+  },
 }
 </script>
 
@@ -64,13 +71,15 @@ switch (props.icon) {
   <div class="tilt flex flex-row items-center gap-2 mb-0 sm:mb-2 md:mb-4">
     <img
       draggable="false"
-      :src="cardIcon"
-      :alt="`Download`"
-      class="icon-image"
+      :src="cards[props.type].icon.src"
+      :alt="cards[props.type].icon.alt"
+      class="w-12 h-12"
     />
     <h3 class="whitespace-nowrap mb-0">{{ props.title }}</h3>
   </div>
-  <div class="box p-4 rounded-xl mb-4">
+  <div
+    :class="`box p-4 mb-4 ${cards[props.type].color} border-b border-r rounded-xl`"
+  >
     <slot />
   </div>
 </template>
@@ -79,22 +88,4 @@ switch (props.icon) {
 .tilt {
   transform: rotate(-2deg);
 }
-
-.box {
-  > p {
-    margin-bottom: 0;
-  }
-
-  margin-bottom: 1rem;
-  border-bottom: 1px ridge;
-  border-right: 1px ridge;
-  border-color: v-bind(color);
-}
-
-.icon {
-  &-image {
-    width: 48px;
-    height: 48px;
-  }
-}
 </style>

components/content/CodeControls.vue

@@ -1,32 +1,35 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const emit = defineEmits(['copy'])
+
+const clicked = ref<boolean>(false)
+
+function p() {
+  emit('copy')
+
+  if (!clicked.value) setTimeout(() => (clicked.value = false), 2000)
+  clicked.value = true
+}
+</script>
 
 <template>
   <div
-    class="absolute flex flex-col justify-start top-0 left-0 w-full h-full pointer-events-none"
+    class="absolute flex flex-col justify-start top-0 left-0 w-full h-full pointer-events-none opacity-0 hover:opacity-100 transition-ease"
   >
     <div class="flex flex-row justify-end items-center p-2">
-      <iconify-icon icon="mdi:content-copy" inline class="button" />
+      <span
+        class="overlay-action flex-grow-0 pointer-events-auto cursor-pointer p-2 border rounded-xl"
+        @click="p"
+      >
+        <Transition name="switch" mode="out-in">
+          <iconify-icon v-if="!clicked" icon="mdi:content-copy" inline />
+          <iconify-icon
+            v-else
+            icon="mdi:check-bold"
+            class="text-green-500"
+            inline
+          />
+        </Transition>
+      </span>
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-.button {
-  @apply flex-grow-0;
-
-  pointer-events: auto;
-
-  padding: 0.5em;
-
-  cursor: pointer;
-
-  background-color: rgb(153 153 255 / 10%);
-
-  border: 1px solid rgb(153 153 255 / 60%);
-  border-radius: 0.5em;
-
-  opacity: 0.5;
-
-  transition: 0.3s ease;
-}
-</style>