add examples

src/app/example/page.tsx

@@ -0,0 +1,15 @@
+import Grid from "@/components/example/grid";
+import Props from "@/components/example/props";
+
+const page = () => {
+  return (
+    <div>
+      <Grid />
+      <Props title="hi" description="hey" bgColor="bg-red-100" />
+      <Props title="hey" description="me" bgColor="bg-red-100" />
+      <Props title="hello" description="hey" bgColor="bg-red-100" />
+    </div>
+  );
+};
+
+export default page;

src/components/example/grid.tsx

@@ -0,0 +1,16 @@
+const Grid = () => {
+  return (
+    /* <div className="border-4 grid grid-rows-3 grid-flow-col"> */
+    <div className="grid grid-flow-row grid-cols-3 border-4">
+      <div className="border-4">first</div>
+      <div className="border-4">second</div>
+      <div className="border-4">third</div>
+      <div className="border-4">fourth</div>
+      <div className="border-4">fifth</div>
+      <div className="border-4">sixth</div>
+      <div className="border-4">seventh</div>
+    </div>
+  );
+};
+
+export default Grid;

src/components/example/props.tsx

@@ -0,0 +1,38 @@
+interface CardProps {
+  title: string;
+  description: string;
+  bgColor?: string; // Optional prop
+}
+
+const Props: React.FC<CardProps> = ({
+  title,
+  description,
+  bgColor = "bg-white",
+}) => {
+  return (
+    <div className={`rounded-lg border p-6 shadow-lg ${bgColor}`}>
+      <h2 className="text-xl font-bold text-gray-800">{title}</h2>
+      <p className="mt-2 text-gray-600">{description}</p>
+    </div>
+  );
+};
+
+/*
+ const Props = ({
+  title,
+  description,
+  bgColor = "bg-white",
+}: {
+  title: string;
+  description: string;
+  bgColor?: string; // Optional prop
+}) => {
+  return (
+    <div className={`border rounded-lg shadow-lg p-6 ${bgColor}`}>
+      <h2 className="text-xl font-bold text-gray-800">{title}</h2>
+      <p className="text-gray-600 mt-2">{description}</p>
+    </div>
+  );
+};
+ */
+export default Props;