feat(contact): replace form with direct social contact cards
This commit is contained in:
@@ -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
|
>
|
||||||
|
<Card className="h-full rounded-sm border-border p-4 transition-colors hover:border-zinc-700">
|
||||||
|
<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>
|
||||||
|
<Typography variant="large" className="mt-3 text-base leading-tight">
|
||||||
|
{item.label}
|
||||||
</Typography>
|
</Typography>
|
||||||
<a
|
<Typography variant="small" className="mt-1 text-muted-foreground">
|
||||||
href="mailto:poyrazavsever@gmail.com"
|
{item.value}
|
||||||
className="text-sm text-red-600 hover:underline"
|
|
||||||
>
|
|
||||||
poyrazavsever@gmail.com
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Typography variant="small" className="text-muted-foreground">
|
|
||||||
Dönüş Süresi
|
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography variant="small">Genelde 24 saat içinde.</Typography>
|
</Card>
|
||||||
</div>
|
</Link>
|
||||||
</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>
|
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user