אחד הרעיונות שהיו פופולריים כשהתחלתי ללמוד HTML היה האפשרות להחליף עיצוב לחלוטין באמצעות שינוי CSS. זה המשיך ללוות אותנו לתוך האיפיון של CSS3 וגם למודולים חדשים יותר של CSS, כולל ובמיוחד במודולים של פלקסבוקס וגריד.
הגישה אז היתה שאפשר יהיה לכתוב קבצי CSS שונים כדי לייצר עיצובים מאוד שונים לאותה מערכת. השתמשנו ב JavaScript כדי לשנות קלאסים, אבל הגדרת העיצוב עצמה שהתאימה לקלאסים אלה הגיעה מקובץ CSS שאמור להיות קל לתחזוקה והחלפה.
אני מודה שזה לא ממש עבד. בהרבה אתרים שינוי עיצוב דרש גם שינוי במבנה ה HTML וראינו הרבה מעקפים כמו לכתוב את אותו קטע בעמוד פעמיים ב HTML ולהחליט מתוך CSS איזה מהם להציג. ובכל זאת היה משהו קסום בחלום הזה שאפשר יהיה לבנות Theme שונה למערכת רק באמצעות קובץ CSS.
היום עם ריאקט וטיילווינד נראה שזרקנו את החלום הזה לחלוטין. הנה קומפוננטת מונה לחיצות האהובה עליי:
import React, { useState } from "react";
export default function ShinyCounter() {
const [count, setCount] = useState(0);
return (
<div className="min-h-screen flex items-center justify-center bg-gradient-to-r from-pink-400 via-yellow-300 to-purple-500">
<div className="bg-white bg-opacity-20 backdrop-blur-lg border border-white border-opacity-30 rounded-2xl p-10 shadow-2xl text-center">
<h1 className="text-5xl font-extrabold text-white drop-shadow-md mb-6">
Shiny Counter
</h1>
<div className="text-7xl font-bold text-white drop-shadow-lg mb-6">
{count}
</div>
<div className="flex gap-4 justify-center">
<button
onClick={() => setCount(count - 1)}
className="px-6 py-3 rounded-xl text-white font-bold bg-gradient-to-br from-red-400 to-pink-500 hover:scale-105 active:scale-95 transition transform duration-200 shadow-lg"
>
- Decrease
</button>
<button
onClick={() => setCount(0)}
className="px-6 py-3 rounded-xl text-white font-bold bg-gradient-to-br from-yellow-300 to-orange-400 hover:scale-105 active:scale-95 transition transform duration-200 shadow-lg"
>
Reset
</button>
<button
onClick={() => setCount(count + 1)}
className="px-6 py-3 rounded-xl text-white font-bold bg-gradient-to-br from-green-400 to-blue-500 hover:scale-105 active:scale-95 transition transform duration-200 shadow-lg"
>
+ Increase
</button>
</div>
</div>
</div>
);
}
אין איך לשנות לה את ה CSS כדי לקבל עיצוב אחר או להשתמש בה בעמוד אחר ושהיא תקבל את העיצוב מהעמוד. זאת הקומפוננטה. זה העיצוב שלה. Take it or leave it.
הגישה היום רואה את ה HTML, ה CSS וה JavaScript בתור יחידה אחת. בשביל לשנות את העיצוב עלינו לכתוב קומפוננטה אחרת. זה חלק מהחשיבות של הוצאת הלוגיקה ל Hook, כלומר בסיפור של ה Counter נוכל לכתוב:
import React from "react";
function useCounter(initialValue = 0) {
const [count, setCount] = React.useState(initialValue);
const increment = () => setCount(count + 1);
const decrement = () => setCount(count - 1);
const reset = () => setCount(initialValue);
return { count, increment, decrement, reset };
}
export default function ShinyCounter() {
const { count, increment, decrement, reset } = useCounter();
return (
<div className="min-h-screen flex items-center justify-center bg-gradient-to-r from-pink-400 via-yellow-300 to-purple-500">
<div className="bg-white bg-opacity-20 backdrop-blur-lg border border-white border-opacity-30 rounded-2xl p-10 shadow-2xl text-center">
<h1 className="text-5xl font-extrabold text-white drop-shadow-md mb-6">
Shiny Counter
</h1>
<div className="text-7xl font-bold text-white drop-shadow-lg mb-6">
{count}
</div>
<div className="flex gap-4 justify-center">
<button
onClick={decrement}
className="px-6 py-3 rounded-xl text-white font-bold bg-gradient-to-br from-red-400 to-pink-500 hover:scale-105 active:scale-95 transition transform duration-200 shadow-lg"
>
- Decrease
</button>
<button
onClick={reset}
className="px-6 py-3 rounded-xl text-white font-bold bg-gradient-to-br from-yellow-300 to-orange-400 hover:scale-105 active:scale-95 transition transform duration-200 shadow-lg"
>
Reset
</button>
<button
onClick={increment}
className="px-6 py-3 rounded-xl text-white font-bold bg-gradient-to-br from-green-400 to-blue-500 hover:scale-105 active:scale-95 transition transform duration-200 shadow-lg"
>
+ Increase
</button>
</div>
</div>
</div>
);
}
export { useCounter };
ועכשיו ה Counter בעמוד השני יוכל להיות הרבה יותר מינימליסטי או עתידני או מה שנבחר ועדיין הלוגיקה לא תשתנה.
מבנה זה מתחבר לכח העל של ה AI לזהות תבניות ולשכפל אותן. במקום שיהיה לי קובץ CSS לאתר וכל HTML חדש אוטומטית יקבל את העיצוב מאותו קובץ CSS, עכשיו יש לי קומפוננטה ובשביל להשתמש בה בדף אחר באתר או באתר אחר אני עובר דרך ה AI
Create a `HomepageCounter` component based on the existing `AboutpageCounter` but matching the design to the home page.
