blboun3/personal-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

sync

Browse Source
This commit is contained in:
Blboun3
2024-05-26 13:29:06 +02:00
parent a8ec23e1e8
commit 0c2600a7f6
9 changed files with 73 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/ShowcaseTabs.jsx
View File

@ -1,4 +1,3 @@
import { Button } from "../components/ui/button";
import {
Card,
CardContent,
@ -13,38 +12,7 @@ import {
TabsTrigger,
} from "../components/ui/tabs";
const data = [
{
value: "thisPage",
handle: "Projekt 1",
title: "This Page",
description: "random text",
images: [
{ src: "temp.jpg", alt: "text" },
{ src: "temp.jpg", alt: "text2" },
],
},
{
value: "thatPage",
title: "That Page",
handle: "Projekt 2",
description: "random text",
images: [
{ src: "temp.jpg", alt: "text" },
{ src: "temp.jpg", alt: "text2" },
],
},
{
value: "otherPge",
title: "Other Page",
handle: "Projekt 3",
description: "random text",
images: [
{ src: "temp.jpg", alt: "text" },
{ src: "temp.jpg", alt: "text2" },
],
},
];
import { data } from "../content/showcase";
export function ShowcaseTabs() {
return (
@ -54,18 +22,26 @@ export function ShowcaseTabs() {
>
<TabsList className={`grid w-full mt-4 grid-cols-${data.length}`}>
{data.map((item) => (
<TabsTrigger value={item.value}>{item.handle}</TabsTrigger>
<TabsTrigger value={item.value} key={item.value}>{item.handle}</TabsTrigger>
))}
</TabsList>
{data.map((item) => (
<TabsContent value={item.value} className="h-full">
<TabsContent value={item.value} className="h-full" key={item.value}>
<Card className="h-[90%] my-auto">
<CardHeader>
<CardTitle>{item.title}</CardTitle>
<CardDescription>{item.description}</CardDescription>
<CardDescription>
<span className="text-pretty">{item.description}</span>
</CardDescription>
</CardHeader>
<CardContent>
<img src="/temp.jpg" alt="" />
<CardContent className="h-[85%] w-full">
<div className="h-full w-full">
<img
src={item.image}
alt={item.imageAlt}
className="object-cover h-full w-full rounded-lg "
/>
</div>
</CardContent>
</Card>
</TabsContent>

2
src/components/ui/card.jsx
View File

@ -5,7 +5,7 @@ import { cn } from "../../lib/utils"
const Card = React.forwardRef(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}
className={cn("rounded-lg border border-bkg bg-card text-card-foreground shadow-sm", className)}
{...props} />
))
Card.displayName = "Card"

6
src/components/ui/dropdown-menu.jsx
View File

@ -36,7 +36,7 @@ const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) =
<DropdownMenuPrimitive.SubContent
ref={ref}
className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
"z-50 min-w-[8rem] overflow-hidden rounded-md border-bkg bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className
)}
{...props} />
@ -50,7 +50,7 @@ const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...pr
ref={ref}
sideOffset={sideOffset}
className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
"z-50 min-w-[8rem] overflow-hidden rounded-md border-bkg bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className
)}
{...props} />
@ -94,7 +94,7 @@ const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props
<DropdownMenuPrimitive.RadioItem
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:text-bkg",
className
)}
{...props}>