[Vuejs]-V-date-picker customize it and have today, last 7 days beside it

I solved it using v-card. It was challenging one and been looking for the answer all over, I was like crashing my head on it. The output would be like this:

enter image description here

The complete code:

<template v-if="filters">
        <div class="d-flex justify-lg-space-between filter__activities">
          <v-text-field
            v-model="searchInText"
            outlined
            dense
            append-icon="fas fa-search"
            placeholder="Search"
          />

          <div class="px-2" />

          <v-select
            v-model="searchInSelect"
            append-icon="fas fa-chevron-down"
            item-color="lucky-point"
            placeholder="Category"
            outlined
            dense
            :items="types"
            :menu-props="{ bottom: true, offsetY: true }"
            class="lucky-point--text"
          />
        </div>

        <div class="filter__activities">
          <v-menu
            ref="menu1"
            v-model="menu1"
            :close-on-content-click="false"
            transition="scale-transition"
            offset-y
            bottom
            min-width="auto"
          >

            <template v-slot:activator="{ on }">
              <v-text-field
                :value="computedDateFormatted"
                outlined
                dense
                placeholder="Select Date"
                append-icon="mdi-calendar"
                v-on="on"
              />
            </template>
            <v-card>
              <div class="d-flex">
                <div class="pa-2 py-16">
                  <div class="py-1">
                    <v-btn
                      plain
                      class="text-capitalize text-subtitle-1 mine-shaft--text filter__activities-active-btn"
                    >
                      Today
                    </v-btn>
                  </div>

                  <div class="py-1">
                    <v-btn
                      plain
                      class="text-capitalize text-subtitle-1 mine-shaft--text"
                    >
                      Last 7 days
                    </v-btn>
                  </div>

                  <div class="py-1">
                    <v-btn
                      plain
                      class="text-capitalize text-subtitle-1 mine-shaft--text"
                    >
                      Last 30 days
                    </v-btn>
                  </div>

                  <div class="py-1">
                    <v-btn
                      plain
                      class="text-capitalize text-subtitle-1 mine-shaft--text"
                    >
                      Last 90 days
                    </v-btn>
                  </div>
                </div>

                <span class="mx-2 mercury--bx-1"></span>

                <div>
                  <v-date-picker
                    v-model="date"
                    @input="menu1 = false"
                    flat
                    no-title
                    color="lucky-point"
                    width="392"
                  />
                </div>
              </div>
            </v-card>
          </v-menu>
        </div>
      </template>