add mail copy

src/app/page.tsx

@@ -1,9 +1,11 @@
 import A from "@/components/A";
+import { CopyMailBadge } from "@/components/CopyMailBadge";
 import { CurrentlyListeningSvg } from "@/components/CurrentlyListeningSvg";
 import { SpotifyTopTrackBadge } from "@/components/SpotifyTopArtist";
 import { UrlBadge } from "@/components/UrlBadge";
+import { GithubIcon } from "@/components/icons/Github";
 import { JsonLd } from "@/components/jsonld/profile-page";
-import { GITHUB_PROFILE, TWITTER_PROFILE } from "@/lib/constants";
+import { TWITTER_PROFILE } from "@/lib/constants";
 import { author } from "@/lib/jsonld";
 import { allPosts } from "contentlayer/generated";
 
@@ -18,11 +20,11 @@ export default function Home() {
 			</h1>
 			<section>
 				<p>
-					<span>Hello 👋🏻</span>
+					Hello <span className="inline-block hover:animate-wiggle">👋🏻</span>
 					<span>
 						{" "}
 						Je suis un développeur fullstack passioné par les automatisations,
-						la performance et la simplicité.
+						la performance et l'open-source.
 					</span>
 				</p>
 			</section>
@@ -44,9 +46,10 @@ export default function Home() {
 					page <A href="/tag/all">blog</A>.
 				</p>
 				<p className="mt-2">
-					Pour l'instant, j'essaie d'apprendre{" "}
+					Par exemple, j'essaie d'apprendre{" "}
 					<UrlBadge url="https://www.rust-lang.org/" title="Rust" /> et{" "}
-					<UrlBadge url="https://go.dev/" title="Go" />.
+					<UrlBadge url="https://go.dev/" title="Go" />. Et je réalise un projet
+					open-source <UrlBadge url="https://pedaki.fr" title="Pedaki" />.
 				</p>
 			</section>
 
@@ -70,8 +73,15 @@ export default function Home() {
 			<section className="mt-8">
 				<p>
 					Vous pouvez me retrouver sur {/* TODO Download SVG and use it here */}
-					<UrlBadge url={GITHUB_PROFILE} title="GitHub" />{" "}
-					<UrlBadge url={TWITTER_PROFILE} title="Twitter" />
+					<GithubIcon />{" "}
+					<UrlBadge
+						url={TWITTER_PROFILE}
+						title="Twitter"
+						favicon="/icons/twitter.svg"
+					/>
+				</p>
+				<p className="mt-2">
+					Ou me contacter par mail: <CopyMailBadge title="me@vahor.fr" />
 				</p>
 			</section>
 		</main>

src/components/CopyMailBadge.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { EMAIL } from "@/lib/constants";
+import { useCopy } from "@/lib/useCopy";
+import { CheckIcon, MailIcon, SendIcon } from "lucide-react";
+import { Badge } from "./ui/badge";
+
+export const CopyMailBadge = () => {
+	const { hasCopied, handleClick } = useCopy(EMAIL);
+	const Icon = hasCopied ? CheckIcon : SendIcon;
+
+	return (
+		<Badge className="cursor-pointer" onClick={handleClick}>
+			<Icon size={16} className="inline-block" />
+			<span>{EMAIL}</span>
+		</Badge>
+	);
+};

src/components/UrlBadge.tsx

@@ -1,5 +1,6 @@
 import { extractMetaTags } from "@/lib/scraper";
 import Image from "next/image";
+import { Badge } from "./ui/badge";
 
 interface UrlBadgeProps {
 	url: string;
@@ -11,22 +12,33 @@ export const UrlBadge = async ({ url, title, favicon }: UrlBadgeProps) => {
 	const metadata = favicon ? { favicon, title } : await extractMetaTags(url);
 
 	return (
-		<a
-			href={url}
-			className="rounded-md border border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 hover:dark:border-neutral-600 bg-accent text-accent-foreground p-1 !no-underline space-x-2 leading-4 text-sm"
-			aria-label={title}
-			target="_blank"
-			rel="noopener noreferrer"
-		>
-			<Image
-				src={metadata.favicon}
-				alt={metadata.title}
-				width={16}
-				height={16}
-				unoptimized={true}
-				className="inline-block rounded-lg"
-			/>
-			<span>{title}</span>
-		</a>
+		<UrlBadgeWithMetadata url={url} title={title} favicon={metadata.favicon} />
+	);
+};
+
+export const UrlBadgeWithMetadata = ({
+	url,
+	title,
+	favicon,
+}: UrlBadgeProps & { favicon: string }) => {
+	return (
+		<Badge asChild>
+			<a
+				href={url}
+				aria-label={title}
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				<Image
+					src={favicon}
+					alt={title}
+					width={16}
+					height={16}
+					unoptimized={true}
+					className="inline-block mb-0.5"
+				/>
+				<span>{title}</span>
+			</a>
+		</Badge>
 	);
 };

src/components/icons/Github.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { GITHUB_PROFILE } from "@/lib/constants";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+import { UrlBadgeWithMetadata } from "../UrlBadge";
+
+export function GithubIcon() {
+	const { resolvedTheme: theme } = useTheme();
+	const [mounted, setMounted] = useState(false);
+
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+
+	return (
+		<UrlBadgeWithMetadata
+			url={GITHUB_PROFILE}
+			title="GitHub"
+			favicon={
+				mounted && theme === "dark"
+					? "/icons/github-mark-white.svg"
+					: "/icons/github-mark.svg"
+			}
+		/>
+	);
+}

src/components/ui/badge.tsx

@@ -0,0 +1,29 @@
+import { Slot } from "@radix-ui/react-slot";
+import { type VariantProps, cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+	"inline w-max rounded-md border border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 hover:dark:border-neutral-600 bg-accent text-accent-foreground p-1 space-x-1 !no-underline leading-4 text-sm whitespace-nowrap",
+	{
+		variants: {
+			variant: {},
+		},
+		defaultVariants: {},
+	},
+);
+
+export interface BadgeProps
+	extends React.HTMLAttributes<HTMLDivElement>,
+		VariantProps<typeof badgeVariants> {
+	asChild?: boolean;
+}
+
+function Badge({ className, variant, asChild, ...props }: BadgeProps) {
+	const Comp = asChild ? Slot : "span";
+	return (
+		<Comp className={cn(badgeVariants({ variant }), className)} {...props} />
+	);
+}
+
+export { Badge, badgeVariants };

src/components/ui/copy-button.tsx

@@ -1,29 +1,16 @@
 "use client";
 
+import { useCopy } from "@/lib/useCopy";
 import { cn } from "@/lib/utils";
 import { CheckIcon, ClipboardIcon } from "lucide-react";
-import { useState } from "react";
 import { Button, type ButtonProps } from "./button";
 
 interface CopyButtonProps extends ButtonProps {
 	value: string;
 }
 
 export function CopyButton({ value, className, ...props }: CopyButtonProps) {
-	const [hasCopied, setHasCopied] = useState(false);
-
-	const handleClick = () => {
-		if (hasCopied) return;
-
-		if (navigator.clipboard) {
-			navigator.clipboard.writeText(value);
-		}
-		setHasCopied(true);
-
-		setTimeout(() => {
-			setHasCopied(false);
-		}, 2000);
-	};
+	const { hasCopied, handleClick } = useCopy(value);
 
 	return (
 		<Button

src/lib/useCopy.tsx

@@ -0,0 +1,20 @@
+import { useState } from "react";
+
+export const useCopy = (text: string) => {
+	const [hasCopied, setHasCopied] = useState(false);
+
+	const handleClick = () => {
+		if (hasCopied) return;
+
+		if (navigator.clipboard) {
+			navigator.clipboard.writeText(text);
+		}
+		setHasCopied(true);
+
+		setTimeout(() => {
+			setHasCopied(false);
+		}, 2000);
+	};
+
+	return { hasCopied, handleClick };
+};

src/styles/globals.css

@@ -78,7 +78,7 @@
 @layer components {
   .post-content {
     @apply md:max-w-3xl flex-1;
-    line-height: 1.75;
+    line-height: 1.9;
   }
   .larger-post-content {
     @apply lg:-mx-24 xl:-mx-32;

tailwind.config.ts

@@ -74,10 +74,15 @@ const config = {
 					from: { height: "var(--radix-accordion-content-height)" },
 					to: { height: "0" },
 				},
+				wiggle: {
+					"0%, 100%": { transform: "rotate(-3deg)" },
+					"50%": { transform: "rotate(3deg)" },
+				},
 			},
 			animation: {
 				"accordion-down": "accordion-down 0.2s ease-out",
 				"accordion-up": "accordion-up 0.2s ease-out",
+				wiggle: "wiggle 1s ease-in-out infinite",
 			},
 		},
 	},