feat: new demo frame design (#5194)

This commit is contained in:
bdbch 2024-05-30 17:28:46 +02:00 committed by GitHub
parent 8d1af5fbe5
commit fb311fb5e9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -4,29 +4,24 @@
:src="currentIframeUrl"
:key="currentIframeUrl"
/>
<div class="antialiased" v-else>
<div v-if="showTabs">
<div class="overflow-hidden antialiased rounded-lg" v-else>
<div class="px-3 py-1 bg-black flex items-center gap-0.5" v-if="showTabs">
<button
v-for="(language, index) in sortedTabs"
:key="index"
@click="setTab(language.name)"
class="px-4 py-2 text-xs font-bold tracking-wide uppercase rounded-t-lg"
class="px-3 py-2 text-sm text-white leading-[125%] font-semibold rounded-[0.625rem] transition-all"
:class="[currentTab === language.name
? 'bg-black text-white'
: 'text-black'
? 'opacity-100 bg-[#1C1917]'
: 'opacity-50 bg-transparent hover:opacity-100 hover:bg-[#1C1917]'
]"
>
{{ language.name }}
</button>
</div>
<div class="overflow-hidden rounded-b-xl">
<div class="overflow-hidden">
<div
class="bg-white border-black border-3 last:rounded-b-xl"
:class="[
showTabs && firstTabSelected
? 'rounded-tr-xl'
: 'rounded-t-xl',
]"
class="bg-white"
>
<demo-frame
:src="currentIframeUrl"