Details XD

This commit is contained in:
2024-04-16 11:28:35 +02:00
parent 82251d5272
commit 0befb1f4f1
8 changed files with 114 additions and 121 deletions

View File

@ -34,7 +34,7 @@ export function LangSwitcher() {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon" className="bg-inherit border-none text-content" dangerouslySetInnerHTML={{ __html: icons["lang"] }} />
<Button variant="outline" size="icon" className="bg-inherit border-none text-content hover:text-bkg" dangerouslySetInnerHTML={{ __html: icons["lang"] }} />
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56">
<DropdownMenuRadioGroup value={clang} onValueChange={clinkClang}>

View File

@ -10,6 +10,6 @@ import { icons } from "../lib/icons"
export function NavButton({selected, variant}) {
return (
<Button variant="outline" size="icon" className={cn("bg-inherit border-none text-content", selected ? "text-accent" : "text-content")} dangerouslySetInnerHTML={{ __html: icons[variant] }} />
<Button variant="outline" size="icon" className={cn("bg-inherit border-none text-content", selected ? "text-accent hover:text-bkg" : "text-content hover:text-bkg")} dangerouslySetInnerHTML={{ __html: icons[variant] }} />
)
}

View File

@ -7,5 +7,7 @@ const { title, description } = dictionary[Astro.currentLocale];
---
<SinglePage>
<ShowcaseTabs client:load/>
<div class="flex flex-col h-screen">
<ShowcaseTabs client:load />
</div>
</SinglePage>

View File

@ -43,51 +43,51 @@ const data = [{
export function ShowcaseTabs() {
return (
<Tabs defaultValue={data[0].value} className="h-full">
{data.map((item) => (
<TabsContent value={item.value} className="">
<Card className="h-full">
<CardHeader>
<CardTitle>{item.title}</CardTitle>
<CardDescription>
{item.description}
</CardDescription>
</CardHeader>
<CardContent>
<Carousel className="w-full h-full" opts={{ align: "start", loop: "true" }}>
<CarouselContent>
{item.images.map((image, index) => (
<CarouselItem key={index}>
<Card>
<CardContent className="flex aspect-square items-center justify-center p-6">
<img src={image.src} alt={image.alt} />
</CardContent>
</Card>
</CarouselItem>
))}
</CarouselContent>
<div className="w-full pt-10 grid grid-cols-2 gap-4 ">
<div className="col-start-1 flex text-center justify-center w-full h-full">
<CarouselPrevious />
</div>
<div className="col-start-2 flex justify-center">
<CarouselNext />
</div>
</div>
</Carousel>
</CardContent>
</Card>
</TabsContent>
))
}
<TabsList className={`grid w-full mt-4 grid-cols-${data.length}`}>
{data.map((item) => (
<TabsTrigger value={item.value}>{item.handle}</TabsTrigger>
))}
</TabsList>
<Tabs defaultValue={data[0].value} className="h-[87%] bottom-0 flex flex-col">
<div className="my-auto">
<div>
{data.map((item) => (
<TabsContent value={item.value} className="">
<Card className="h-full">
<CardHeader>
<CardTitle>{item.title}</CardTitle>
<CardDescription>
{item.description}
</CardDescription>
</CardHeader>
<CardContent>
<Carousel className="w-full h-full" opts={{ align: "start", loop: "true" }}>
<CarouselContent>
{item.images.map((image, index) => (
<CarouselItem key={index}>
<Card>
<CardContent className="flex aspect-square items-center justify-center p-6">
<img src={image.src} alt={image.alt} />
</CardContent>
</Card>
</CarouselItem>
))}
</CarouselContent>
<div className="w-full pt-10 grid grid-cols-2 gap-4 ">
<div className="col-start-1 flex text-center justify-center w-full h-full">
<CarouselPrevious />
</div>
<div className="col-start-2 flex justify-center">
<CarouselNext />
</div>
</div>
</Carousel>
</CardContent>
</Card>
</TabsContent>
))}
<TabsList className={`grid w-full mt-4 grid-cols-${data.length}`}>
{data.map((item) => (
<TabsTrigger value={item.value}>{item.handle}</TabsTrigger>
))}
</TabsList>
</div>
</div>
</Tabs>
)
}

View File

@ -33,7 +33,7 @@ export function ThemeSelector() {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon" className="bg-inherit border-none text-content" dangerouslySetInnerHTML={{ __html: icons[theme] }} />
<Button variant="outline" size="icon" className="bg-inherit border-none text-content hover:text-bkg" dangerouslySetInnerHTML={{ __html: icons[theme] }} />
</DropdownMenuTrigger>
<DropdownMenuContent className="w-20">
<DropdownMenuRadioGroup value={theme} onValueChange={newTheme}>