feat: cocktail card - save to image

package.json

@@ -22,11 +22,13 @@
     "astro": "^4.0.7",
     "clsx": "2.0.0",
     "framer-motion": "10.16.16",
+    "html-to-image": "1.11.11",
     "nanostores": "0.9.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sharp": "^0.33.1",
     "tailwindcss": "^3.4.0",
+    "tailwind-merge": "2.2.0",
     "typescript": "^5.3.3"
   },
   "devDependencies": {

src/components/story/ButtonSet.tsx

@@ -0,0 +1,47 @@
+import { BACKGROUND_BOX, TEXT, type Cocktail } from "@/data/cocktail";
+import { cn } from "@/lib/utils";
+import * as htmlToImage from "html-to-image";
+interface Props extends Cocktail {}
+
+const ButtonSet = ({ variant }: Props): JSX.Element => {
+  const downloadImage = () => {
+    const result = document.getElementById("result");
+    if (!result) return;
+    htmlToImage.toJpeg(result, { quality: 0.96 }).then(function (dataUrl) {
+      const link = document.createElement("a");
+      link.download = "result.jpeg";
+      link.href = dataUrl;
+      link.click();
+    });
+  };
+
+  return (
+    <div className="relative mx-auto mb-16 mt-2 flex w-64 gap-4" id="buttonset">
+      <a
+        href="/"
+        className={cn(
+          `flex w-full flex-wrap items-center justify-center gap-4 rounded-3xl border border-rose-200 px-2 py-1.5
+        text-center font-semibold shadow-md`,
+          BACKGROUND_BOX[variant],
+          TEXT[variant]
+        )}
+      >
+        กลับสู่หน้าหลัก
+      </a>
+      <button
+        className={cn(
+          `flex w-full flex-wrap items-center justify-center gap-2 rounded-3xl border border-rose-200 px-2 py-1.5
+        text-center font-semibold shadow-md`,
+          BACKGROUND_BOX[variant],
+          TEXT[variant]
+        )}
+        onClick={downloadImage}
+      >
+        <i className="icon-[mdi--download]"></i>
+        บันทึกรูป
+      </button>
+    </div>
+  );
+};
+
+export default ButtonSet;

src/components/story/Card.tsx

@@ -0,0 +1,36 @@
+import { useRef, type ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+import { BACKGROUND_BOX, NAME, TEXT, type Cocktail } from "@/data/cocktail";
+
+interface Props extends Cocktail {
+  children: ReactNode;
+  img: string;
+}
+
+const Card = ({ variant, children, img }: Props) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "border-1 z-10 mt-1 block h-[36rem] w-[22rem] max-w-full items-center justify-center text-pretty rounded-2xl border-[#FFEEE8] px-2 py-2 text-center shadow-md",
+        BACKGROUND_BOX[variant]
+      )}
+    >
+      <div className="mx-auto h-[35rem] rounded-2xl border border-amber-50 px-3">
+        <img src={img} className="mx-auto w-[7rem]" />
+        <h1 className={cn(`pb-2 text-2xl font-bold`, TEXT[variant])}>
+          {NAME[variant]}
+        </h1>
+        <div className="text-pretty pb-4 text-xs font-medium text-mutedbrown">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Card;

src/components/story/FooterDecorator.astro

@@ -0,0 +1,63 @@
+---
+import { Image } from "astro:assets";
+
+import Cake1 from "@/assets/elements/cake-1.png";
+import Calendar from "@/assets/elements/calendar.png";
+import Donut from "@/assets/elements/donut.png";
+import Drinks from "@/assets/elements/drinks.png";
+import Heart1 from "@/assets/elements/heart-1.png";
+import Letter from "@/assets/elements/letter.png";
+import Orange from "@/assets/elements/orange.png";
+import Palette from "@/assets/elements/palette.png";
+import Strawberry from "@/assets/elements/strawberry.png";
+---
+
+<div
+  class="pointer-events-none absolute inset-x-0 -left-[1.25rem] bottom-32 select-none opacity-80"
+>
+  <Image
+    class="absolute left-0 top-[48px] h-32 w-[152px]"
+    src={Calendar}
+    alt=""
+  />
+  <Image
+    class="absolute left-[471.56px] top-[8.91px] h-[166.91px] w-[140.50px] origin-top-left rotate-[62.88deg]"
+    src={Palette}
+    alt=""
+  />
+  <Image
+    class="absolute left-[193px] top-0 h-[90px] w-24"
+    src={Heart1}
+    alt=""
+  />
+  <Image
+    class="absolute left-[226.20px] top-[15px] h-[105.82px] w-[109.92px] origin-top-left rotate-[1.19deg]"
+    src={Orange}
+    alt=""
+  />
+  <Image
+    class="absolute left-[142px] top-[45px] h-[104px] w-[118px]"
+    src={Donut}
+    alt=""
+  />
+  <Image
+    class="absolute left-[117px] top-[45px] h-[121px] w-[70px]"
+    src={Drinks}
+    alt=""
+  />
+  <Image
+    class="absolute left-[226px] top-[67.43px] h-[115.51px] w-[129.02px] origin-top-left rotate-[-17.79deg]"
+    src={Letter}
+    alt=""
+  />
+  <Image
+    class="absolute left-[207px] top-[69px] h-[88px] w-[88px]"
+    src={Strawberry}
+    alt=""
+  />
+  <Image
+    class="absolute left-[315px] top-[71px] h-[82px] w-[84px]"
+    src={Cake1}
+    alt=""
+  />
+</div>

src/data/cocktail.ts

@@ -0,0 +1,40 @@
+export interface Cocktail {
+	variant: "raspberry" | "cosmo" | "pina" | "gin" | "lagoon" | "lalemon";
+}
+
+export const BACKGROUND: Record<Cocktail["variant"], string> = {
+	raspberry: "bg-raspberry",
+	cosmo: "bg-cosmo",
+	pina: "bg-pina",
+	gin: "bg-gin",
+	lagoon: "bg-lagoon",
+	lalemon: "bg-lalemon",
+};
+
+export const BACKGROUND_BOX: Record<Cocktail["variant"], string> = {
+	raspberry: "bg-raspberrybox",
+	cosmo: "bg-cosmobox",
+	pina: "bg-pinabox",
+	gin: "bg-ginbox",
+	lagoon: "bg-lagoonbox",
+	lalemon: "bg-lalemonbox",
+};
+
+export const TEXT: Record<Cocktail["variant"], string> = {
+	raspberry: "text-salmon",
+	cosmo: "text-peach",
+	pina: "text-pineapple",
+	gin: "text-leaf",
+	lagoon: "text-tropical",
+	lalemon: "text-lavender",
+};
+
+export const NAME: Record<Cocktail["variant"], string> = {
+	raspberry: "Summer Berry Sangria",
+	cosmo: "Cosmopolitan",
+	pina: "Pina Colada",
+	gin: "Gin and Tonic",
+	lagoon: "Blue Lagoon",
+	lalemon: "Lavender Lemonade",
+};
+

src/layouts/BaseLayout.astro

@@ -1,5 +1,6 @@
 ---
 import "@/style.css";
+import { ViewTransitions } from "astro:transitions";
 interface Props {
   pageTitle?: string;
 }
@@ -14,10 +15,11 @@ const { pageTitle = "GearFestival" } = Astro.props;
     <meta name="viewport" content="width=device-width" />
     <meta name="generator" content={Astro.generator} />
     <title>{pageTitle}</title>
+    <ViewTransitions />
   </head>
   <body>
     <main
-      class="absolute left-1/2 flex min-h-screen w-full max-w-md -translate-x-1/2 outline-dashed outline-2 outline-black"
+      class="absolute left-1/2 flex min-h-screen w-full max-w-md -translate-x-1/2 font-sans outline-dashed outline-2 outline-black"
     >
       <slot />
     </main>

src/layouts/CocktailCard.astro

@@ -0,0 +1,34 @@
+---
+import { Image } from "astro:assets";
+
+import BaseLayout from "@/layouts/BaseLayout.astro";
+import Card from "@/components/story/Card";
+import ButtonSet from "@/components/story/ButtonSet";
+import FooterDecorator from "@/components/story/FooterDecorator.astro";
+
+import Logo from "@/assets/elements/logo.png";
+import { BACKGROUND, type Cocktail } from "@/data/cocktail";
+
+interface Props extends Cocktail {
+  img: string;
+}
+
+const { variant, img } = Astro.props;
+---
+
+<BaseLayout>
+  <div
+    id="result"
+    class:list={[
+      "relative flex w-full flex-col items-center justify-center gap-4 overflow-hidden bg-cover bg-repeat pb-16",
+      BACKGROUND[variant],
+    ]}
+  >
+    <Image src={Logo} class="mx-auto mt-8 w-20" alt="" />
+    <Card client:load variant={variant} img={img}>
+      <slot />
+    </Card>
+    <ButtonSet client:load variant={variant} />
+    <FooterDecorator />
+  </div>
+</BaseLayout>

src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...args: ClassValue[]) {
+	return twMerge(clsx(args));
+}

src/pages/cocktail/bluelagoon.astro

@@ -0,0 +1,26 @@
+---
+import CocktailCard from "@/layouts/CocktailCard.astro";
+import BlueLagoon from "@/assets/elements/blue-lagoon.png";
+---
+
+<CocktailCard variant="lagoon" img={BlueLagoon.src}>
+  บลู ลากูน – เครื่องดื่มสีสดใสที่เกิดจากการผสมกันระหว่าง
+  <br />วอดก้า บลูคูราโซ่ และน้ำมะนาว เนื่องด้วยรสชาติที่ให้ความสดชื่น
+  และสีสันที่สวยงามจึงเป็นเครื่องดื่มที่มักเป็นที่นิยมในงานสังสรรค์
+  <br /><br />
+   คุณเปรียบเสมือนค็อกเทลดังกล่าว คุณเป็นมนุษย์ที่ชอบเข้าสังคม สดใส ร่าเริง
+  ชอบพูดคุยและทำความรู้จักกับผู้คนใหม่ ๆ
+  เปรียบเหมือนผีเสื้อที่บินไปหาดอกไม้มากมาย
+  <br /><br />
+   คุณเป็นคนที่มีความเป็นเด็กน้อยในตัวสูง
+  ตื่นเต้นกับสิ่งที่แปลกใหม่รอบตัวจนในบางทีคุณอาจจะมีแนวโน้มที่จะเป็นคนเบื่อง่าย
+
+
+  <br /><br />
+   ถึงแม้ภายนอกคุณจะดูสดใส แต่จริง ๆ
+  คุณก็มีมุมที่มีความลึกลับที่คนนอกอาจจะเข้าไม่ถึง
+  <br /><br />
+   “Love has absolutely no pattern,
+  <br />and no one will ever be perfect“
+  <br />—Taylor swift
+</CocktailCard>

src/pages/cocktail/cosmopolitan.astro

@@ -0,0 +1,26 @@
+---
+import CocktailCard from "@/layouts/CocktailCard.astro";
+import Cosmo from "@/assets/elements/cosmopolitan.png";
+---
+
+<CocktailCard variant="cosmo" img={Cosmo.src}>
+  วอดก้า แครนเบอรี่ และน้ำมะนาว สามส่วนผสมหลักที่เข้ากันได้อย่างไม่น่าเชื่อ
+  รวมกันเป็นค็อกเทลรสเปรี้ยวอมหวานสีชมพูสดใส
+  <br />ที่ครองใจสาว ๆ นักดื่มทั่วโลก
+  <br /><br />
+   คุณเปรียบเสมือนค็อกเทลดังกล่าว คุณเป็นคนขี้เล่น มีเสน่ห์
+  <br />และมักจะเต็มเปี่ยมไปด้วยพลังงานในการทำสิ่งต่าง ๆ
+  <br />คุณเป็นคนที่ให้ลุคสบาย ๆ แต่ในขณะเดียวกัน ก็แฝงไปด้วยความมั่นใจในตนเอง
+  มีอารมณ์ขัน
+  <br />และเป็นคนที่มักจะปล่อยวางในสถานการณ์ที่ควบคุมไม่ได้ได้ดี
+  แต่ในบางครั้งด้วยความที่คุณเป็นคนคารมคมคาย
+  <br /><br />
+   คนอื่นอาจมองว่าคุณเป็นคนเจ้าชู้ ไม่จริงจังกับความสัมพันธ์
+  จากการที่คุณสามารถเข้ากับคนง่าย
+  <br />คุณอาจจะต้องใช้ระยะเวลาและความจริงใจในการพิสูจน์
+  <br />ซึ่งหากผ่านพ้นไปได้แล้วจะได้เจอกับความรักที่คุณตามหาแน่นอน
+  <br /><br />
+   “Love has absolutely no pattern,
+  <br />and no one will ever be perfect“
+  <br />—Taylor swift
+</CocktailCard>