123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398 |
- <script setup lang="ts">
- import { useSystemStore } from '@/stores/system'
- /* Initialize System store. */
- const System = useSystemStore()
- let body
- let response
- response = await fetch('https://api.telr.io/v1/ticker/quote/BCH')
- // console.log('STATUS RESPONSE', response)
- body = await response.json()
- // console.log('BODY', body)
- /* Verify body (price) results. */
- if (body && body.price) {
- /* Set Bitcoin Cash quote. */
- System.quotes.BCH = body
- }
- // FIXME FOR DEV PURPOSES ONLY
- System.quotes.NEXA = { price: 0.00001 }
- </script>
- <template>
- <!--
- When the mobile menu is open, add `overflow-hidden` to the `body` element to prevent double scrollbars
- Menu open: "fixed inset-0 z-40 overflow-y-auto", Menu closed: ""
- -->
- <main class="bg-white shadow-sm lg:static lg:overflow-y-visible">
- <div class="w-full px-4 sm:px-6 lg:px-8">
- <div class="relative flex justify-between xl:grid xl:grid-cols-12 lg:gap-8">
- <div class="hidden lg:flex">
- <div class="flex-shrink-0 flex items-center cursor-pointer px-5" @click="toggleMenu">
- <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
- </div>
- </div>
- <div class="min-w-0 flex-1 md:px-8 lg:px-0 xl:col-span-6">
- <div class="flex items-center px-6 py-4 md:max-w-3xl md:mx-auto lg:max-w-none lg:mx-0 xl:px-0">
- <div class="w-full">
- <label for="search" class="sr-only">Search</label>
- <div class="relative">
- <div class="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center">
- <!-- Heroicon name: solid/search -->
- <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
- <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
- </svg>
- </div>
- <input
- id="global-search"
- class="block w-full bg-white border border-gray-300 rounded-md py-2 pl-10 pr-3 text-sm placeholder-gray-500 focus:outline-none focus:text-gray-900 focus:placeholder-gray-400 focus:ring-1 focus:ring-rose-500 focus:border-rose-500 sm:text-sm"
- placeholder="What can I find for you Dev? ( use shortcut: Ctrl + K )"
- type="text"
- />
- </div>
- </div>
- </div>
- </div>
- <div class="flex items-center md:absolute md:right-0 md:inset-y-0 lg:hidden">
- <!-- Mobile menu button -->
- <button
- type="button"
- class="-mx-2 rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-rose-500"
- aria-expanded="false"
- >
- <span class="sr-only">Open menu</span>
- <!--
- Icon when menu is closed.
- Heroicon name: outline/menu
- Menu open: "hidden", Menu closed: "block"
- -->
- <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
- </svg>
- <!--
- Icon when menu is open.
- Heroicon name: outline/x
- Menu open: "block", Menu closed: "hidden"
- -->
- <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
- </svg>
- </button>
- </div>
- <div class="hidden lg:flex lg:items-center lg:justify-end xl:col-span-4">
- <button class="text-2xl font-bold text-gray-400 text-center group" @click="openNetworkMenu">
- <span class="group-hover:text-indigo-400">
- {{displayPrice}}
- </span>
- <span class="block text-sm text-gray-300 group-hover:text-gray-400">
- BCH/USD
- </span>
- </button>
- <button class="ml-5 flex-shrink-0 bg-white rounded-full p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500">
- <span class="sr-only">View notifications</span>
- <!-- Heroicon name: outline/bell -->
- <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
- <path
- stroke-linecap="round"
- stroke-linejoin="round"
- stroke-width="2"
- d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
- />
- </svg>
- </button>
- <!-- Profile dropdown -->
- <div class="flex-shrink-0 relative ml-5">
- <div>
- <button type="button" class="bg-white rounded-full flex focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
- <span class="sr-only">Open user menu</span>
- <img class="h-8 w-8 rounded-full" src="@/assets/img/cyber-hacker-icon.jpg" alt="" />
- </button>
- </div>
- <!--
- Dropdown menu, show/hide based on menu state.
- Entering: "transition ease-out duration-100"
- From: "transform opacity-0 scale-95"
- To: "transform opacity-100 scale-100"
- Leaving: "transition ease-in duration-75"
- From: "transform opacity-100 scale-100"
- To: "transform opacity-0 scale-95"
- -->
- <div
- class="hidden origin-top-right absolute z-10 right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 py-1 focus:outline-none"
- role="menu"
- aria-orientation="vertical"
- aria-labelledby="user-menu-button"
- tabindex="-1"
- >
- <!-- Active: "bg-gray-100", Not Active: "" -->
- <a href="javascript://" class="block py-2 px-4 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
- <a href="javascript://" class="block py-2 px-4 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
- <a href="javascript://" class="block py-2 px-4 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
- </div>
- </div>
- <button
- class="flex-none ml-6 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 uppercase"
- @click="connect"
- >
- Get Connected
- </button>
- </div>
- </div>
- </div>
- <!-- Mobile menu, show/hide based on menu state. -->
- <nav v-if="showMobileMenu" class="lg:hidden" aria-label="Global">
- <div class="max-w-3xl mx-auto px-2 pt-2 pb-3 space-y-1 sm:px-4">
- <!-- Current: "bg-gray-100 text-gray-900", Default: "hover:bg-gray-50" -->
- <a href="javascript://" aria-current="page" class="bg-gray-100 text-gray-900 block rounded-md py-2 px-3 text-base font-medium text-gray-900">
- Home
- </a>
- <a href="javascript://" class="hover:bg-gray-50 block rounded-md py-2 px-3 text-base font-medium text-gray-900">
- Popular
- </a>
- <a href="javascript://" class="hover:bg-gray-50 block rounded-md py-2 px-3 text-base font-medium text-gray-900">
- Communities
- </a>
- <a href="javascript://" class="hover:bg-gray-50 block rounded-md py-2 px-3 text-base font-medium text-gray-900">
- Trending
- </a>
- </div>
- <div class="border-t border-gray-200 pt-4">
- <div class="max-w-3xl mx-auto px-4 flex items-center sm:px-6">
- <div class="flex-shrink-0">
- <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
- </div>
- <div class="ml-3">
- <div class="text-base font-medium text-gray-800">Chelsea Hagon</div>
- <div class="text-sm font-medium text-gray-500">[email protected]</div>
- </div>
- <button type="button" class="ml-auto flex-shrink-0 bg-white rounded-full p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500">
- <span class="sr-only">View notifications</span>
- <!-- Heroicon name: outline/bell -->
- <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
- <path
- stroke-linecap="round"
- stroke-linejoin="round"
- stroke-width="2"
- d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
- />
- </svg>
- </button>
- </div>
- <div class="mt-3 max-w-3xl mx-auto px-2 space-y-1 sm:px-4">
- <a href="javascript://" class="block rounded-md py-2 px-3 text-base font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-900">Your Profile</a>
- <a href="javascript://" class="block rounded-md py-2 px-3 text-base font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-900">Settings</a>
- <a href="javascript://" class="block rounded-md py-2 px-3 text-base font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-900">Sign out</a>
- </div>
- </div>
- <div class="mt-6 max-w-3xl mx-auto px-4 sm:px-6">
- <a href="javascript://" class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-rose-600 hover:bg-rose-700">
- New Post
- </a>
- <div class="mt-6 flex justify-center">
- <a href="javascript://" class="text-base font-medium text-gray-900 hover:underline">
- Go Premium
- </a>
- </div>
- </div>
- </nav>
- </main>
- </template>
- <script lang="ts">
- /* Import modules. */
- import numeral from 'numeral'
- export default {
- props: {
- pageId: String
- },
- data: () => {
- return {
- usd: null,
- showMobileMenu: null,
- }
- },
- computed: {
- displayPrice: function () {
- if (!this.usd) return '$0.00'
- return numeral(this.usd).format('$0.00')
- },
- title: function () {
- switch(this.pageId) {
- case 'dashboard':
- return 'Dashboard'
- case 'stats':
- return 'Bitcoin Statistics'
- case 'status':
- return 'Community & Network Status'
- case 'ver':
- return 'Ver: Node Virtual Assistant'
- case 'blockchains':
- return 'Blockchain Insights'
- case 'discuss':
- return 'Discuss'
- case 'events':
- return 'Event Calendar'
- case 'markets':
- return 'Market Insights'
- case 'privacy':
- return 'Privacy Insights'
- case 'news':
- return 'Headline News'
- /* Desktop */
- case 'file-mgr':
- return 'File Manager'
- case 'notebook':
- return 'Notebook'
- /* Profiles */
- case 'contributors':
- return 'Contributors'
- case 'profile':
- return 'Profile'
- /* Projects */
- case 'projects':
- case 'project-detail':
- return 'Projects'
- /* Workspaces */
- case 'code-editor':
- return 'Code Editor'
- case 'graphics-studio':
- return 'Graphics Studio'
- case 'sandbox':
- return 'Sandbox'
- /* Support */
- case 'buidling':
- return 'BUIDLing 101'
- case 'faq':
- return 'FAQ'
- case 'guides':
- return 'Guides & Tutorials'
- case 'matrix':
- return 'Matrix'
- case 'slack':
- return 'Slack'
- case 'tickets':
- return 'Support Tickets'
- default:
- return 'Unknown Page'
- }
- },
- },
- methods: {
- async init() {
- let body
- let response
- response = await fetch('https://api.telr.io/v1/ticker/quote/BCH')
- // console.log('STATUS RESPONSE', response)
- body = await response.json()
- // console.log('BODY', body)
- if (body.price) {
- this.usd = body.price
- }
- },
- /**
- * Go To
- *
- * Navigates to a page location (in the router).
- */
- goTo(_location) {
- this.$router.push(_location)
- },
- toggleMenu() {
- console.log('TOGGLE MENU')
- this.$emit('toggleMenu')
- },
- openNetworkMenu() {
- alert(`Choose a supported network:
- - Bitcoin Cash (BCH)
- - Bitcoin Lightning (BTC)
- - Dash (DASH)
- - eCash (XEC)
- - Ethereum (ETH)
- - Litecoin (LTC)
- - Monero (XMR)
- - Nexa (NEX)
- - Polygon (MATIC)
- - Tron (TRX)
- - Zcash (ZEC)
- `)
- },
- connect() {
- alert(`Choose a blockchain to manage your on-chain data:
- 1. Avalanche
- 2. Binance
- 3. Ethereum
- 4. Nexaverse
- 5. Polygon
- 6. Smart Bitcoin
- 7. Tron`)
- }
- },
- created: function () {
- this.usd = 0
- this.showMobileMenu = false
- /* Update USD. */
- this.init()
- },
- mounted: function () {
- //
- },
- }
- </script>
|