@visualizevalue/mint-app-base 0.0.7 → 0.1.1

package/app/components/Navbar.client.vue

@@ -1,86 +0,0 @@
-<template>
-  <nav v-if="isConnected">
-    <NuxtLink :to="{ name: 'id', params: { id: account } }">
-      <Icon type="home" />
-      <span>Home</span>
-    </NuxtLink>
-    <NuxtLink :to="{ name: 'profile-address', params: { address: account } }">
-      <Icon type="user" />
-      <span>Profile</span>
-    </NuxtLink>
-  </nav>
-</template>
-
-<script setup>
-import { useAccount } from '@wagmi/vue'
-
-const { address, isConnected } = useAccount()
-
-const account = computed(() => address.value.toLowerCase())
-</script>
-
-<style scoped>
-nav {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacer-lg);
-
-  > * {
-    padding: var(--size-4);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--spacer-sm);
-    height: var(--size-6);
-    color: var(--gray-z-5);
-
-    :deep(> .icon) {
-      width: var(--size-6);
-      height: var(--size-6);
-    }
-
-    > span {
-      display: none;
-    }
-
-    &.router-link-active {
-      color: var(--color);
-    }
-  }
-}
-
-/* POSITIONAL */
-nav {
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  height: var(--navbar-height);
-  z-index: 100;
-
-  @media (--md) {
-    top: 0;
-    right: auto;
-    flex-direction: column;
-    height: 100dvh;
-    width: var(--navbar-width);
-
-    /* FOR NOW */
-    display: none;
-  }
-}
-
-/* COLORS */
-nav {
-  background: var(--background-semi);
-  backdrop-filter: blur(var(--size-1));
-  border-top: var(--border);
-
-  @media (--md) {
-    background: none;
-    backdrop-filter: none;
-    border-top: none;
-  }
-}
-</style>

package/app/components/Page/FrameSM.vue

@@ -1,33 +0,0 @@
-<template>
-  <section class="frame-sm">
-    <slot />
-  </section>
-</template>
-
-<style scoped>
-.frame-sm {
-  width: 100%;
-  max-width: var(--dialog-width);
-  min-height: 100dvh;
-  padding: var(--spacer);
-  margin: 0 auto;
-  display: flex;
-  height: fit-content;
-  align-self: center;
-  flex-direction: column;
-  gap: var(--spacer-lg);
-  justify-content: center;
-  align-items: center;
-  background: var(--gray-z-1);
-
-  :deep(> div) {
-    width: 100%;
-  }
-
-  @media (--sm) {
-    min-height: 0;
-    margin: 0 auto 10vh;
-    border: var(--border);
-  }
-}
-</style>

package/app/components/QueryDialog.vue

@@ -1,38 +0,0 @@
-<template>
-  <DialogFrame ref="dialog">
-    <div v-if="dialogId === 'email_verified'" class="inner">
-      <button class="close" @click="close"><Icon type="x" /></button>
-      <h1>Email verified!</h1>
-      <p>Thank you for verifying your email. We'll be in touch as soon as we're ready to launch.</p>
-      <div class="actions">
-        <button @click="close" class="button">Ok</button>
-      </div>
-    </div>
-  </DialogFrame>
-</template>
-
-<script setup>
-const route = useRoute()
-const router = useRouter()
-
-const KNOWN = [
-  'email_verified'
-]
-
-const dialog = ref()
-const dialogId = computed(() => route.query?.dialog)
-
-const close = () => {
-  dialog.value.close()
-  router.replace({ query: { ...route.query, dialog: undefined }})
-}
-
-onMounted(() => {
-  if (KNOWN.includes(dialogId.value)) {
-    dialog.value.open()
-  }
-})
-</script>
-
-<style>
-</style>

package/app/components/ToggleDarkMode.client.vue

@@ -1,58 +0,0 @@
-<template>
-  <button @click="() => toggleDark()" title="Switch Light/Dark mode">
-    <Icon v-if="isDark" type="sun" :size="20" />
-    <Icon v-else type="moon" :size="20" />
-  </button>
-</template>
-
-<script setup>
-import { useToggle } from '@vueuse/core'
-
-const toggleDark = useToggle(isDark)
-
-watch(isDark, () => {
-  if (isDark.value) {
-    document.documentElement.classList.remove('lightmode')
-    localStorage.setItem('color-scheme', 'dark')
-  } else {
-    document.documentElement.classList.add('lightmode')
-    localStorage.setItem('color-scheme', 'light')
-  }
-})
-
-onMounted(() => {
-  if (! isDark.value) {
-    document.documentElement.classList.add('lightmode')
-  }
-})
-</script>
-
-<style scoped>
-  button {
-    display: none;
-    position: fixed;
-    bottom: calc(var(--navbar-height) + var(--spacer));
-    right: var(--spacer);
-    height: var(--size-5);
-    width: var(--size-5);
-    outline: none;
-    z-index: 200;
-
-    .vue-feather {
-      height: var(--size-5);
-      width: var(--size-5);
-      transition: all var(--speed);
-    }
-
-    &:--highlight {
-      .vue-feather {
-        color: var(--gray-z-7);
-      }
-    }
-
-    @media (--md) {
-      display: block;
-      bottom: var(--spacer);
-    }
-  }
-</style>

package/app/components/Visual/ImagePreview.vue

@@ -1,8 +0,0 @@
-<template>
-  <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect width="64" height="64" fill="var(--gray-z-0)"/>
-    <path d="M39 23H25C23.8954 23 23 23.8954 23 25V39C23 40.1046 23.8954 41 25 41H39C40.1046 41 41 40.1046 41 39V25C41 23.8954 40.1046 23 39 23Z" stroke="var(--gray-z-2)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="M28.5 30C29.3284 30 30 29.3284 30 28.5C30 27.6716 29.3284 27 28.5 27C27.6716 27 27 27.6716 27 28.5C27 29.3284 27.6716 30 28.5 30Z" stroke="var(--gray-z-2)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="M41 35L36 30L25 41" stroke="var(--gray-z-2)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-  </svg>
-</template>