42 lines
3.7 KiB
Vue
42 lines
3.7 KiB
Vue
<template>
|
|
<header class="flex flex-row items-center gap-2 pb-4 border-b-2 sm:gap-4 lg:pb-8">
|
|
<span class="px-3 py-2 rounded bg-fuchsia-300">
|
|
<svg class="inline stroke-purple-900" height="32" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" transform="translate(3 3)"><path d="m7.5.5c.35132769 0 .69661025.02588228 1.03404495.07584411l.50785434 1.53911115c.44544792.12730646.86820077.30839026 1.26078721.53578009l1.4600028-.70360861c.5166435.39719686.9762801.86487779 1.3645249 1.388658l-.7293289 1.44720284c.2201691.39604534.3936959.82158734.5131582 1.2692035l1.5298263.5338186c.0390082.29913986.0591302.60421522.0591302.91399032 0 .35132769-.0258823.69661025-.0758441 1.03404495l-1.5391112.50785434c-.1273064.44544792-.3083902.86820077-.5357801 1.26078721l.7036087 1.4600028c-.3971969.5166435-.8648778.9762801-1.388658 1.3645249l-1.4472029-.7293289c-.39604532.2201691-.82158732.3936959-1.26920348.5131582l-.5338186 1.5298263c-.29913986.0390082-.60421522.0591302-.91399032.0591302-.35132769 0-.69661025-.0258823-1.03404495-.0758441l-.50785434-1.5391112c-.44544792-.1273064-.86820077-.3083902-1.26078723-.5357801l-1.46000277.7036087c-.51664349-.3971969-.97628006-.8648778-1.36452491-1.388658l.72932886-1.4472029c-.2203328-.39633993-.39395403-.82222042-.51342462-1.27020241l-1.52968981-.53381682c-.03892294-.29882066-.05900023-.60356226-.05900023-.91299317 0-.35132769.02588228-.69661025.07584411-1.03404495l1.53911115-.50785434c.12730646-.44544792.30839026-.86820077.53578009-1.26078723l-.70360861-1.46000277c.39719686-.51664349.86487779-.97628006 1.388658-1.36452491l1.44720284.72932886c.39633995-.2203328.82222044-.39395403 1.27020243-.51342462l.53381682-1.52968981c.29882066-.03892294.60356226-.05900023.91299317-.05900023z" stroke-width=".933"/><circle cx="7.5" cy="7.5" r="3"/></g></svg>
|
|
</span>
|
|
|
|
<h1 class="font-bold font-mono text-2xl text-gray-900 lg:text-4xl">OG:IMAGE</h1>
|
|
|
|
<div class="ml-auto">
|
|
<RouterLink :to="{name: 'Home'}" custom="true" v-slot="{isActive, href, navigate}">
|
|
<a
|
|
v-bind="$attrs"
|
|
:href="href"
|
|
@click="navigate"
|
|
class="rounded ml-8 p-3"
|
|
:class="{'bg-slate-300': isActive}"
|
|
>
|
|
<svg class="inline" height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(1 1)"><path d="m.5 9.5 9-9 9 9"/><path d="m2.5 7.5v8c0 .5522847.44771525 1 1 1h3c.55228475 0 1-.4477153 1-1v-4c0-.5522847.44771525-1 1-1h2c.5522847 0 1 .4477153 1 1v4c0 .5522847.4477153 1 1 1h3c.5522847 0 1-.4477153 1-1v-8"/></g></svg>
|
|
|
|
Home
|
|
</a>
|
|
</RouterLink>
|
|
|
|
<!--
|
|
<RouterLink :to="{name: 'About'}" custom="true" v-slot="{isActive, href, navigate}">
|
|
<a
|
|
v-bind="$attrs"
|
|
:href="href"
|
|
@click="navigate"
|
|
class="rounded ml-8 p-3"
|
|
:class="{'bg-slate-300': isActive}"
|
|
>
|
|
<svg class="inline" height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(3 3)"><circle cx="7.5" cy="5.5" r="2"/><path d="m.5 3.5h1v-1c0-1.1045695.8954305-2 2-2h8c1.1045695 0 2 .8954305 2 2v10c0 1.1045695-.8954305 2-2 2h-8c-1.1045695 0-2-.8954305-2-2v-1h-1"/><path d="m.5 7.5h1"/><path d="m.5 5.5h1"/><path d="m.5 9.5h1"/><path d="m10.5 10.5v-1c0-1.1045695-.8954305-2-2-2h-2c-1.1045695 0-2 .8954305-2 2v1c0 .5522847.44771525 1 1 1h4c.5522847 0 1-.4477153 1-1z"/></g></svg>
|
|
|
|
About
|
|
</a>
|
|
</RouterLink>
|
|
-->
|
|
</div>
|
|
</header>
|
|
</template>
|