Details XD
This commit is contained in:
@ -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}>
|
||||
|
@ -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] }} />
|
||||
)
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
@ -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}>
|
||||
|
Reference in New Issue
Block a user