chore: rearrange code

This commit is contained in:
Shariq Ansari 2025-08-07 16:43:16 +05:30
parent aa7d9affdb
commit 202ba3c856

View File

@ -1,5 +1,6 @@
<template> <template>
<div v-if="show" class="w-[352px] border-l"> <div v-if="show" class="w-[352px] border-l text-base">
<!-- Event Header -->
<div <div
class="flex items-center justify-between p-4.5 text-ink-gray-7 text-lg font-medium" class="flex items-center justify-between p-4.5 text-ink-gray-7 text-lg font-medium"
> >
@ -38,8 +39,41 @@
<Button icon="x" variant="ghost" @click="close" /> <Button icon="x" variant="ghost" @click="close" />
</div> </div>
</div> </div>
<div v-if="mode !== 'details'" class="text-base">
<div> <!-- Event Details -->
<div v-if="mode == 'details'">
<div class="flex items-start gap-2 px-4.5 py-3 pb-0">
<div
class="mx-0.5 my-[5px] size-2.5 rounded-full cursor-pointer"
:style="{
backgroundColor: event.color || '#30A66D',
}"
/>
<div class="flex flex-col gap-[3px]">
<div class="text-ink-gray-8 font-semibold text-xl">
{{ event.title || __('(No title)') }}
</div>
<div class="text-ink-gray-6 text-p-base">{{ formattedDateTime }}</div>
</div>
</div>
<div
v-if="event.description && event.description !== '<p></p>'"
class="mx-4.5 my-2.5 border-t border-outline-gray-1"
/>
<div v-if="event.description && event.description !== '<p></p>'">
<div class="flex gap-2 items-center text-ink-gray-7 px-4.5 py-1">
<DescriptionIcon class="size-4" />
{{ __('Description') }}
</div>
<div
class="px-4.5 py-2 text-ink-gray-7 text-p-base"
v-html="event.description"
/>
</div>
</div>
<!-- Event create, duplicate & edit -->
<div v-else>
<div class="px-4.5 py-3"> <div class="px-4.5 py-3">
<TextInput <TextInput
ref="eventTitle" ref="eventTitle"
@ -160,37 +194,6 @@
</div> </div>
</div> </div>
</div> </div>
<div v-else class="text-base">
<div class="flex items-start gap-2 px-4.5 py-3 pb-0">
<div
class="mx-0.5 my-[5px] size-2.5 rounded-full cursor-pointer"
:style="{
backgroundColor: event.color || '#30A66D',
}"
/>
<div class="flex flex-col gap-[3px]">
<div class="text-ink-gray-8 font-semibold text-xl">
{{ event.title || __('(No title)') }}
</div>
<div class="text-ink-gray-6 text-p-base">{{ formattedDateTime }}</div>
</div>
</div>
<div
v-if="event.description && event.description !== '<p></p>'"
class="mx-4.5 my-2.5 border-t border-outline-gray-1"
/>
<div v-if="event.description && event.description !== '<p></p>'">
<div class="flex gap-2 items-center text-ink-gray-7 px-4.5 py-1">
<DescriptionIcon class="size-4" />
{{ __('Description') }}
</div>
<div
class="px-4.5 py-2 text-ink-gray-7 text-p-base"
v-html="event.description"
/>
</div>
</div>
</div>
</template> </template>
<script setup> <script setup>
@ -222,7 +225,7 @@ const props = defineProps({
}, },
}) })
const emit = defineEmits(['save', 'delete', 'details', 'close', 'edit']) const emit = defineEmits(['save', 'edit', 'delete', 'details', 'close'])
const show = defineModel() const show = defineModel()