117 lines
3.3 KiB
TypeScript
117 lines
3.3 KiB
TypeScript
import { Icon } from "@iconify/react";
|
|
import { FloatingLabel } from "@/components/floating-label";
|
|
import { FakeRelativeWindow } from "./client-windows";
|
|
import Image from "next/image"
|
|
import Link from "next/link";
|
|
|
|
export const FakeWindow = ({
|
|
windowText, children
|
|
}: {
|
|
windowText: string
|
|
children: React.ReactNode
|
|
}) => (
|
|
<div className="mx-auto w-[480px] md:w-[520px] md:border border-primary">
|
|
<div className="p-1 pb-0">
|
|
<div className="hidden md:flex bg-primary p-2 justify-between text-background">
|
|
<div className="ms-1 pointer-events-none">
|
|
{windowText}
|
|
</div>
|
|
<FloatingLabel placeholder="Useless button btw">
|
|
<div className="flex gap-2">
|
|
<button className="bg-primary border border-[#FFA826] border-outset p-1"><Icon icon="lucide:minus"/></button>
|
|
<button className="bg-primary border border-[#FFA826] border-outset p-1"><Icon icon="lucide:x"/></button>
|
|
</div>
|
|
</FloatingLabel>
|
|
</div>
|
|
</div>
|
|
<div className="m-1 md:border border-primary">
|
|
<div className="md:p-8">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
export const HomeWindows = () => (
|
|
<div className="relative">
|
|
{/* <FakeRelativeWindow
|
|
windowText="featured.exe"
|
|
className="left-[540px] top-0 z-20"
|
|
draggable
|
|
>
|
|
<div className="space-y-2" style={{ width: 300 }}>
|
|
<Image
|
|
className=""
|
|
alt="Left 4 Dead"
|
|
src="https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/550/header.jpg?t=1745368562"
|
|
width={300}
|
|
height={200}
|
|
unoptimized
|
|
/>
|
|
<p>Join my Left 4 Dead 2 server!</p>
|
|
</div>
|
|
</FakeRelativeWindow> */}
|
|
<FakeRelativeWindow
|
|
windowText="nola.png"
|
|
className="-right-[73%] top-[1300px] z-20"
|
|
draggable
|
|
>
|
|
<FloatingLabel placeholder="This is Nola, my OC :3">
|
|
<Image
|
|
className=""
|
|
alt="Nola"
|
|
src="/images/nola.png"
|
|
width={200}
|
|
height={200}
|
|
/>
|
|
</FloatingLabel>
|
|
</FakeRelativeWindow>
|
|
<FakeRelativeWindow
|
|
windowText="bouncing_coral.exe"
|
|
className="-left-[78%] top-[260px] z-20"
|
|
>
|
|
<Link
|
|
href="https://x.com/JoelGuerraC/status/1287088236171603969/photo/1"
|
|
target="_blank"
|
|
>
|
|
<Image
|
|
className="animate-silly-bouncing"
|
|
alt="Bounce Coral"
|
|
src="/images/coral-a1.png"
|
|
width={200}
|
|
height={200}
|
|
quality={10}
|
|
unoptimized
|
|
/>
|
|
</Link>
|
|
</FakeRelativeWindow>
|
|
<FakeRelativeWindow
|
|
windowText="coral-1.exe"
|
|
className='-left-[75%] top-[1980px] z-10'
|
|
draggable
|
|
>
|
|
<Image
|
|
alt="Coral 1"
|
|
src="https://media.tenor.com/J-gqkU0R8VgAAAAi/coral-glasses-ena-dream-bbq.gif"
|
|
width={200}
|
|
height={200}
|
|
quality={10}
|
|
unoptimized
|
|
/>
|
|
</FakeRelativeWindow>
|
|
<FakeRelativeWindow
|
|
windowText="coral_cupcake.mkv"
|
|
className="-right-[85%] top-[440px] z-10"
|
|
draggable
|
|
>
|
|
<Image
|
|
alt="Coral Cupcake"
|
|
src="https://media1.tenor.com/m/N5K-4AWj8QcAAAAC/coral-glasses-cupcake.gif"
|
|
width={240}
|
|
height={200}
|
|
quality={10}
|
|
unoptimized
|
|
/>
|
|
</FakeRelativeWindow>
|
|
</div>
|
|
); |