vue-bits/src/components/code/CodeExample.vue

<template>
  <div class="code-example">
    <div v-for="[name, snippet] in codeEntries" :key="name" class="code-section">
      <h2 class="demo-title">{{ getDisplayName(name) }}</h2>

      <div v-if="snippet" class="code-container">
        <div class="code-wrapper" :class="{ collapsed: shouldCollapse(snippet) && !isExpanded(name) }">
          <VCodeBlock
            :code="snippet"
            highlightjs
            :lang="getLanguage(name)"
            theme="nord"
            :copy-button="true"
            :persistent-copy-button="true"
            class="code-block"
          />

          <div v-if="shouldCollapse(snippet) && !isExpanded(name)" class="fade-overlay" />

          <button
            v-if="shouldCollapse(snippet)"
            class="expand-button"
            :class="{ expanded: isExpanded(name) }"
            @click="toggleExpanded(name)"
          >
            {{ isExpanded(name) ? 'Collapse Snippet' : 'See Full Snippet' }}
          </button>
        </div>
      </div>

      <div v-if="!snippet" class="no-code">
        <span>Nothing here yet!</span>

        <i class="pi pi-face-sad"></i>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { VCodeBlock } from '@wdns/vue-code-block';
import type { CodeObject } from '../../types/code';

const props = defineProps<{
  codeObject: CodeObject;
}>();

const skipKeys = ['cli'];

const expandedSections = ref<Set<string>>(new Set());

const codeEntries = computed(() => {
  return Object.entries(props.codeObject).filter(([name]) => !skipKeys.includes(name));
});

const shouldCollapse = (snippet: string) => {
  const codeLines = snippet?.split('\n').length || 0;
  return codeLines > 35;
};

const isExpanded = (name: string) => {
  return expandedSections.value.has(name);
};

const toggleExpanded = (name: string) => {
  if (expandedSections.value.has(name)) {
    expandedSections.value.delete(name);
  } else {
    expandedSections.value.add(name);
  }
};

const getDisplayName = (name: string) => {
  if (name === 'code') return 'Code';
  if (name === 'cli') return 'CLI Command';
  if (name === 'utility') return 'Utility';
  if (name === 'usage') return 'Usage';
  if (name === 'installation') return 'Installation';
  return name.charAt(0).toUpperCase() + name.slice(1);
};

const getLanguage = (name: string) => {
  if (name === 'cli') return 'bash';
  if (name === 'code') return 'html';
  if (name === 'usage') return 'html';
  if (name === 'installation') return 'bash';
  return 'javascript';
};
</script>

<style scoped>
.code-example {
  margin: 1.2rem 0;
}

.code-section {
  margin-bottom: 2rem;
}

.code-container {
  position: relative;
  margin-bottom: 1.2rem;
}

.code-wrapper {
  position: relative;
  overflow: hidden;
  border: 1px solid #142216;
  border-radius: 15px;
}

.code-wrapper.collapsed {
  max-height: 600px;
}

.code-block {
  overflow: hidden;
  border: none;
  border-radius: 15px;
}

.fade-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(to bottom, transparent, #0b0b0b);
  pointer-events: none;
  z-index: 1;
}

.expand-button {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  padding: 0.5rem 1rem;
  border-radius: 12px;
  height: 2.5rem;
  font-size: 14px;
  font-weight: 500;
  background-color: #0b0b0b;
  border: 1px solid #142216;
  color: white;
  cursor: pointer;
  z-index: 2;
  transition: background-color 0.3s ease;
}

.expand-button:hover {
  background-color: #111;
}

.expand-button:active {
  background-color: #111;
}

.no-code {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #a1a1aa;
  font-style: italic;
  padding: 2rem;
  background: #0b0b0b;
  border: 1px solid #142216;
  border-radius: 15px;
}

:deep(.v-code-block) {
  background: #0b0b0b;
  border-radius: 15px;
  font-size: 14px;
}

:deep(.v-code-block pre) {
  background: #0b0b0b;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
}

:deep(.v-code-block--tab-highlightjs-github-dark-icon) {
  color: #999 !important;
  fill: #999 !important;
}

:deep(.v-code-block--me-1) {
  margin-right: 0 !important;
}

:deep(.v-code-block .hljs) {
  background: #0b0b0b;
  color: #fff;
  font-size: 14px;
}
</style>