feat(contact): replace form with direct social contact cards

This commit is contained in:
Poyraz Avsever
2026-03-11 12:00:55 +03:00
parent dfd99caa76
commit 843e1dd246
+44 -86
View File
@@ -1,97 +1,55 @@
"use client"; import Link from "next/link";
import { Icon } from "@iconify/react";
import { Card, Typography } from "poyraz-ui/atoms";
import { useState } from "react"; const CONTACT_LINKS = [
import { Button, Card, Input, Label, Textarea, Typography } from "poyraz-ui/atoms"; {
id: "email",
label: "E-posta",
value: "poyrazavsever@gmail.com",
href: "mailto:poyrazavsever@gmail.com",
icon: "mdi:email-outline",
},
{
id: "linkedin",
label: "LinkedIn",
value: "linkedin.com/in/poyrazavsever",
href: "https://www.linkedin.com/in/poyrazavsever/",
icon: "mdi:linkedin",
},
{
id: "instagram",
label: "Instagram",
value: "@poyraz_avsever",
href: "https://instagram.com/poyraz_avsever",
icon: "mdi:instagram",
},
] as const;
export function ContactContent() { export function ContactContent() {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [message, setMessage] = useState("");
const isValid = name.trim() && email.trim() && message.trim();
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
if (!isValid) return;
const subject = encodeURIComponent(`Portfolyo İletişim - ${name.trim()}`);
const body = encodeURIComponent(
`Ad Soyad: ${name.trim()}\nE-posta: ${email.trim()}\n\nMesaj:\n${message.trim()}`,
);
window.location.href = `mailto:poyrazavsever@gmail.com?subject=${subject}&body=${body}`;
};
return ( return (
<section className="grid gap-3 md:grid-cols-[1fr_1.2fr]"> <section className="grid gap-3 md:grid-cols-3">
<Card className="rounded-sm border-border p-4"> {CONTACT_LINKS.map((item) => (
<Typography variant="large" className="text-base"> <Link
İletişim key={item.id}
</Typography> href={item.href}
<div className="mt-4 space-y-3"> target={item.id === "email" ? undefined : "_blank"}
<div> rel={item.id === "email" ? undefined : "noreferrer"}
<Typography variant="small" className="text-muted-foreground"> className="block"
E-posta
</Typography>
<a
href="mailto:poyrazavsever@gmail.com"
className="text-sm text-red-600 hover:underline"
> >
poyrazavsever@gmail.com <Card className="h-full rounded-sm border-border p-4 transition-colors hover:border-zinc-700">
</a> <div className="inline-flex h-9 w-9 items-center justify-center rounded-sm border border-border text-muted-foreground">
<Icon icon={item.icon} width={18} height={18} />
</div> </div>
<div> <Typography variant="large" className="mt-3 text-base leading-tight">
<Typography variant="small" className="text-muted-foreground"> {item.label}
Dönüş Süresi </Typography>
<Typography variant="small" className="mt-1 text-muted-foreground">
{item.value}
</Typography> </Typography>
<Typography variant="small">Genelde 24 saat içinde.</Typography>
</div>
</div>
</Card>
<Card className="rounded-sm border-border p-4">
<form onSubmit={handleSubmit} className="space-y-3">
<div className="space-y-1.5">
<Label htmlFor="contact-name">Ad Soyad</Label>
<Input
id="contact-name"
value={name}
onChange={(event) => setName(event.target.value)}
placeholder="Adın soyadın"
className="rounded-sm"
/>
</div>
<div className="space-y-1.5">
<Label htmlFor="contact-email">E-posta</Label>
<Input
id="contact-email"
type="email"
value={email}
onChange={(event) => setEmail(event.target.value)}
placeholder="ornek@eposta.com"
className="rounded-sm"
/>
</div>
<div className="space-y-1.5">
<Label htmlFor="contact-message">Mesaj</Label>
<Textarea
id="contact-message"
value={message}
onChange={(event) => setMessage(event.target.value)}
placeholder="Mesajını yaz..."
className="min-h-28 rounded-sm"
/>
</div>
<div className="flex justify-end">
<Button type="submit" className="rounded-sm" disabled={!isValid}>
Gönder
</Button>
</div>
</form>
</Card> </Card>
</Link>
))}
</section> </section>
); );
} }