chore: fix responsiveness
This commit is contained in:
zernonia
parent
89417e9e66
commit
7e8b7c5b54
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
100
apps/www/src/lib/registry/default/example/Cards/ActivityGoal.vue
Normal file
100
apps/www/src/lib/registry/default/example/Cards/ActivityGoal.vue
Normal file
|
|
@ -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>
|
||||
125
apps/www/src/lib/registry/default/example/Cards/index.vue
Normal file
125
apps/www/src/lib/registry/default/example/Cards/index.vue
Normal file
|
|
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user