From 7e8b7c5b5437746dce0976ac5ba5630fe1a64484 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Sun, 17 Sep 2023 23:24:18 +0800
Subject: [PATCH] chore: fix responsiveness

---
 .../theme/components/theming/Theming.vue      |  22 ++-
 .../examples/forms/layouts/FormsLayout.vue    |  11 +-
 .../default/example/Cards/ActivityGoal.vue    | 100 ++++++++++++++
 .../registry/default/example/Cards/index.vue  | 125 ++++++++++++++++++
 4 files changed, 243 insertions(+), 15 deletions(-)
 create mode 100644 apps/www/src/lib/registry/default/example/Cards/ActivityGoal.vue
 create mode 100644 apps/www/src/lib/registry/default/example/Cards/index.vue

diff --git a/apps/www/.vitepress/theme/components/theming/Theming.vue b/apps/www/.vitepress/theme/components/theming/Theming.vue
index 912de1e0..01f79f48 100644
--- a/apps/www/.vitepress/theme/components/theming/Theming.vue
+++ b/apps/www/.vitepress/theme/components/theming/Theming.vue
@@ -376,30 +376,24 @@ const range = ref({
               <CardContent>
                 <div class="space-y-4">
                   <div
-                    class="flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm bg-secondary"
+                    class="flex w-auto max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm bg-muted"
                   >
-                    <p class="text-foreground">
-                      Hi There!, I'm Bear, the founder of Bear Studios. I'm here
-                      to help you with anything you need.
-                    </p>
+                    Hi, how can I help you today?
                   </div>
                   <div
-                    class="flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm ml-auto bg-primary text-primary-foreground"
+                    class="flex w-auto max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm ml-auto bg-primary text-primary-foreground"
                   >
-                    <p>Hey, I'm having trouble with my account.</p>
+                    Hey, I'm having trouble with my account.
                   </div>
                   <div
-                    class="flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm bg-secondary"
+                    class="flex w-auto max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm bg-muted"
                   >
-                    <p class="text-foreground">
-                      Sure, I can help you with that. What seems to be the
-                      problem?
-                    </p>
+                    Sure, I can help you with that. What seems to be the problem?
                   </div>
                   <div
-                    class="flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm ml-auto bg-primary text-primary-foreground"
+                    class="flex w-auto max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm ml-auto bg-primary text-primary-foreground"
                   >
-                    <p>I can't log in.</p>
+                    I can't log in.
                   </div>
                 </div>
               </CardContent>
diff --git a/apps/www/src/examples/forms/layouts/FormsLayout.vue b/apps/www/src/examples/forms/layouts/FormsLayout.vue
index 94a04e3b..67a199da 100644
--- a/apps/www/src/examples/forms/layouts/FormsLayout.vue
+++ b/apps/www/src/examples/forms/layouts/FormsLayout.vue
@@ -4,7 +4,16 @@ import { Separator } from '@/lib/registry/new-york/ui/separator'
 </script>
 
 <template>
-  <div class="md:hidden" />
+  <div class="md:hidden">
+    <VPImage
+      alt="Forms"
+      width="1280"
+      height="1214" class="block" :image="{
+        dark: '/examples/forms-dark.png',
+        light: '/examples/forms-light.png',
+      }"
+    />
+  </div>
   <div class="hidden space-y-6 p-10 pb-16 md:block">
     <div class="space-y-0.5">
       <h2 class="text-2xl font-bold tracking-tight">
diff --git a/apps/www/src/lib/registry/default/example/Cards/ActivityGoal.vue b/apps/www/src/lib/registry/default/example/Cards/ActivityGoal.vue
new file mode 100644
index 00000000..fe9674b9
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/Cards/ActivityGoal.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Button } from '@/lib/registry/default/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/lib/registry/default/ui/card'
+import { themes } from '@/lib/registry/themes'
+import { useConfigStore } from '@/stores/config'
+
+const { theme, radius, setRadius, setTheme } = useConfigStore()
+
+const goal = ref(350)
+
+const data = [
+  { goal: 400 },
+  { goal: 300 },
+  { goal: 200 },
+  { goal: 300 },
+  { goal: 200 },
+  { goal: 278 },
+  { goal: 189 },
+  { goal: 239 },
+  { goal: 300 },
+  { goal: 200 },
+  { goal: 278 },
+  { goal: 189 },
+  { goal: 349 },
+]
+</script>
+
+<template>
+  <Card>
+    <CardHeader class-name="pb-4">
+      <CardTitle class-name="text-base">
+        Move Goal
+      </CardTitle>
+      <CardDescription>Set your daily activity goal.</CardDescription>
+    </CardHeader>
+    <CardContent class-name="pb-2">
+      <div className="flex items-center justify-center space-x-2">
+        <Button
+          variant="outline"
+          size="icon"
+          class-name="h-8 w-8 shrink-0 rounded-full"
+          :disabled="goal <= 200"
+          @click="goal -= 10"
+        >
+          <Minus class-name="h-4 w-4" />
+          <span className="sr-only">Decrease</span>
+        </Button>
+        <div className="flex-1 text-center">
+          <div className="text-5xl font-bold tracking-tighter">
+            {{ goal }}
+          </div>
+          <div className="text-[0.70rem] uppercase text-muted-foreground">
+            Calories/day
+          </div>
+        </div>
+        <Button
+          variant="outline"
+          size="icon"
+          class-name="h-8 w-8 shrink-0 rounded-full"
+          :disabled="goal >= 400"
+          @click="goal += 10 "
+        >
+          <Plus class-name="h-4 w-4" />
+          <span className="sr-only">Increase</span>
+        </Button>
+      </div>
+      <div className="my-3 h-[60px]">
+        <!-- <ResponsiveContainer width="100%" height="100%">
+          <BarChart data="{data}">
+            <Bar
+              data-key="goal"
+              style="{"
+              {
+              fill: "var(--theme-primary)",
+              opacity: 0.2,
+              "--theme-primary": `hsl(${
+              theme?.cssVars[mode="==" "dark" ? "dark" : "light"].primary
+              })`,
+              } as React.CSSProperties
+              }
+            />
+          </BarChart>
+        </ResponsiveContainer> -->
+      </div>
+    </CardContent>
+    <CardFooter>
+      <Button class-name="w-full">
+        Set Goal
+      </Button>
+    </CardFooter>
+  </Card>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/Cards/index.vue b/apps/www/src/lib/registry/default/example/Cards/index.vue
new file mode 100644
index 00000000..96cb3abb
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/Cards/index.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ChevronDown, Minus, Plus, Send } from 'lucide-vue-next'
+import { addDays, startOfToday } from 'date-fns'
+import {
+  months,
+  payments,
+  roles,
+  teamMembers,
+  years,
+} from './utils/data'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/lib/registry/default/ui/card'
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from '@/lib/registry/default/ui/avatar'
+import { Button } from '@/lib/registry/default/ui/button'
+import { Textarea } from '@/lib/registry/default/ui/textarea'
+import { Calendar } from '@/lib/registry/default/ui/calendar'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/lib/registry/default/ui/dropdown-menu'
+import { Label } from '@/lib/registry/default/ui/label'
+import { Switch } from '@/lib/registry/default/ui/switch'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/lib/registry/default/ui/select'
+import { Input } from '@/lib/registry/default/ui/input'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/lib/registry/default/ui/tooltip'
+import { Separator } from '@/lib/registry/default/ui/separator'
+import RadixIconsGithubLogo from '~icons/radix-icons/github-logo'
+import RiGoogleLine from '~icons/ri/google-line'
+
+const strictlyNecessarySwitch = ref<boolean>(true)
+const functionalCookiesSwitch = ref<boolean>(false)
+const performanceCookiesSwitch = ref<boolean>(false)
+const selectedArea = ref('Billing')
+const selectedSecurity = ref('Medium')
+const selectedMonth = ref<string>(months[0])
+const selectedYear = ref<string>(years[0])
+const selectedPayment = ref(payments[0])
+const goal = ref(350)
+
+function switchPayment(payment: any) {
+  selectedPayment.value = payment
+}
+
+const range = ref({
+  start: startOfToday(),
+  end: addDays(startOfToday(), 8),
+})
+</script>
+
+<template>
+  <div className="md:grids-col-2 grid md:gap-4 lg:grid-cols-10 xl:grid-cols-11 xl:gap-4">
+    <div className="space-y-4 lg:col-span-4 xl:col-span-6 xl:space-y-4">
+      <CardsStats />
+      <div className="grid gap-1 sm:grid-cols-[280px_1fr] md:hidden">
+        <CardsCalendar />
+        <div className="pt-3 sm:pl-2 sm:pt-0 xl:pl-4">
+          <CardsActivityGoal />
+        </div>
+        <div className="pt-3 sm:col-span-2 xl:pt-4">
+          <CardsMetric />
+        </div>
+      </div>
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
+        <div className="space-y-4 xl:space-y-4">
+          <CardsTeamMembers />
+          <CardsCookieSettings />
+          <CardsPaymentMethod />
+        </div>
+        <div className="space-y-4 xl:space-y-4">
+          <CardsChat />
+          <CardsCreateAccount />
+          <div className="hidden xl:block">
+            <CardsReportIssue />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div className="space-y-4 lg:col-span-6 xl:col-span-5 xl:space-y-4">
+      <div className="hidden gap-1 sm:grid-cols-[280px_1fr] md:grid">
+        <CardsCalendar />
+        <div className="pt-3 sm:pl-2 sm:pt-0 xl:pl-3">
+          <CardsActivityGoal />
+        </div>
+        <div className="pt-3 sm:col-span-2 xl:pt-3">
+          <CardsMetric />
+        </div>
+      </div>
+      <div className="hidden md:block">
+        <CardsDataTable />
+      </div>
+      <CardsShare />
+      <div className="xl:hidden">
+        <CardsReportIssue />
+      </div>
+    </div>
+  </div>
+</template>