first commit

components/ui-components/cards/CardsWeather.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const labels = ref({
+  0: "SU",
+  1: "MO",
+  2: "TU",
+  3: "WED",
+  4: "TH",
+  5: "FR",
+  6: "SA",
+});
+
+const expand = ref(false);
+const time = ref(0);
+
+const forecast = ref([
+  { day: "Tuesday", icon: "mdi-white-balance-sunny", temp: "24\xB0/12\xB0" },
+  { day: "Wednesday", icon: "mdi-white-balance-sunny", temp: "22\xB0/14\xB0" },
+  { day: "Thursday", icon: "mdi-cloud", temp: "25\xB0/15\xB0" },
+]);
+</script>
+
+<template>
+  <!-- ----------------------------------------------------------------------------- -->
+  <!-- Weather -->
+  <!-- ----------------------------------------------------------------------------- -->
+  <v-card class="mx-auto"   elevation="0">
+    <v-card-item title="Florida">
+      <template v-slot:subtitle>
+        <v-icon
+          icon="mdi-alert"
+          size="18"
+          color="error"
+          class="me-1 pb-1"
+        ></v-icon>
+
+        Extreme Weather Alert
+      </template>
+    </v-card-item>
+
+    <v-card-text class="py-0">
+      <v-row align="center" no-gutters>
+        <v-col
+          class="text-h3"
+          cols="6"
+        >
+          64&deg;F
+        </v-col>
+
+        <v-col cols="6" class="text-right">
+          <v-icon
+            color="error"
+            icon="mdi-weather-hurricane"
+            size="40"
+          ></v-icon>
+        </v-col>
+      </v-row>
+    </v-card-text>
+
+    <div class="d-flex py-3 justify-space-between">
+      <v-list-item
+        density="compact"
+        prepend-icon="mdi-weather-windy"
+      >
+        <v-list-item-subtitle>123 km/h</v-list-item-subtitle>
+      </v-list-item>
+
+      <v-list-item
+        density="compact"
+        prepend-icon="mdi-weather-pouring"
+      >
+        <v-list-item-subtitle>48%</v-list-item-subtitle>
+      </v-list-item>
+    </div>
+
+    <v-expand-transition>
+      <div v-if="expand">
+        <div class="py-2">
+          <v-slider
+            v-model="time"
+            :max="6"
+            :step="1"
+            :ticks="labels"
+            class="mx-4"
+            color="primary"
+            density="compact"
+            hide-details
+            show-ticks="always"
+            thumb-size="10"
+          ></v-slider>
+        </div>
+
+        <v-list class="bg-transparent">
+          <v-list-item
+            v-for="item in forecast"
+            :key="item.day"
+            :title="item.day"
+            :append-icon="item.icon"
+            :subtitle="item.temp"
+          >
+          </v-list-item>
+        </v-list>
+      </div>
+    </v-expand-transition>
+
+    <v-divider></v-divider>
+
+    <v-card-actions>
+      <v-btn @click="expand = !expand">
+        {{ !expand ? 'Full Report' : 'Hide Report' }}
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>