Merge pull request #3 from iClasser/khalid-twitter1

Khalid twitter component updates

Author: hmdroh

apps/web/app/page.tsx

@@ -5,6 +5,8 @@ import { useSearchParams, useRouter } from "next/navigation";
 import "./page.module.css";
 import QuizMarkdownEditor from "../components/markdown-editor";
 import ChatgptEditor from "../components/chatgpt-editor";
+import XEditor from "../components/x-editor";
+
 import GradientEditor from "../components/gradient-editor";
 import { CardSizeProvider } from "@repo/ui/context/CardSizeContext";
 
@@ -20,7 +22,12 @@ const tabs = [
   {
     key: "gradient",
     label: "Gradient Card",
-  }
+  },
+  {
+    key: "x",
+    label: "X Card",
+  },
+
 ];
 
 function HomeContent() {
@@ -41,6 +48,7 @@ function HomeContent() {
         {currentTab === "markdown" ? <QuizMarkdownEditor /> : null}
         {currentTab === "chatgpt" ? <ChatgptEditor /> : null}
         {currentTab === "gradient" ? <GradientEditor /> : null}
+        {currentTab === "x" ? <XEditor /> : null}
       </CardSizeProvider>
     </MainHomeLayout>
   );

apps/web/components/common/index.tsx

@@ -0,0 +1,136 @@
+"use client";
+import { Slider } from "../ui/slider";
+import { Input } from "../ui/input";
+import { Textarea } from "../ui/textarea";
+import { cn } from "../../lib/cn";
+
+function SliderBox({
+  keyName,
+  value,
+  label,
+  min,
+  max,
+  unit,
+  widthWrapper = false,
+  formatValue = false,
+  setStateValue,
+}: {
+  keyName: string;
+  value: number;
+  label: string;
+  min: number;
+  max: number;
+  unit?: string;
+  formatValue?: boolean;
+  widthWrapper?: boolean;
+  setStateValue: (name: string, value: any) => void;
+}) {
+  const comp =  (
+    <>
+      <label className="block mb-2">
+        {label || <span>{keyName}</span>}:{" "}
+        {formatValue ? (
+          <span>{new Intl.NumberFormat().format(value)}</span>
+        ) : (
+          value
+        )}
+        {unit && <span className="">{unit}</span>}
+      </label>
+      <Slider
+        min={min}
+        max={max}
+        name={keyName}
+        value={[value]}
+        onValueChange={(val) => setStateValue(keyName, val)}
+        className="w-full"
+      />
+    </>
+  );
+
+  if (widthWrapper) {
+    return <WithWrapper>{comp}</WithWrapper>;
+  }
+  return comp;
+}
+
+function DrawInput({
+  keyName,
+  value,
+  placeholder,
+  label,
+  onChange: setStateValue,
+  isTextArea = false,
+  type = "text",
+  className = "",
+}: {
+  keyName: string;
+  value: string;
+  placeholder?: string;
+  label?: React.ReactNode;
+  onChange: (name: string, value: any) => void;
+  isTextArea?: boolean;
+  type?: string;
+  className?: string;
+}) {
+  return (
+    <div className={cn("mb-4", className)}>
+      <label className="block">{label || <span>{keyName}</span>}:</label>
+      {isTextArea ? (
+        <Textarea
+          value={value}
+          onChange={(e) => setStateValue(keyName, e.target.value)}
+          className="w-full px-2 border rounded-md"
+          placeholder={placeholder}
+        />
+      ) : (
+        <Input
+          type={type}
+          value={value}
+          onChange={(e) => setStateValue(keyName, e.target.value)}
+          className="w-full px-2 border rounded-md"
+          placeholder={placeholder}
+        />
+      )}
+    </div>
+  );
+}
+
+function WithWrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex flex-col mt-4 border p-2 rounded-md">{children}</div>
+  );
+}
+
+function CheckBox({
+  keyName,
+  value,
+  label,
+  setStateValue,
+  widthWrapper = false,
+}: {
+  keyName: string;
+  value: boolean;
+  label: string;
+  widthWrapper?: boolean;
+  setStateValue: (name: string, value: any) => void;
+}) {
+  const component = (
+    <label className="flex items-center">
+      <input
+        type="checkbox"
+        checked={value}
+        name={keyName}
+        onChange={(e) => setStateValue(keyName, e.target.checked)}
+        className="mr-2"
+      />
+      {label || <span>{keyName}</span>}
+    </label>
+  );
+
+  if (widthWrapper) {
+    return <WithWrapper>{component}</WithWrapper>;
+  }
+  return component;
+}
+
+export { SliderBox, DrawInput, CheckBox };

apps/web/components/gradient-editor.tsx

@@ -4,12 +4,10 @@ import { useContext, useEffect, useState } from "react";
 import { DownloadButton } from "@repo/web-ui/download-button";
 import { CardSizeContext } from "@repo/ui/context/CardSizeContext";
 import SocialMediaController from "@repo/web-ui/SocialMediaController";
-import { Slider } from "./ui/slider";
-import { Input } from "./ui/input";
-import { Textarea } from "./ui/textarea";
-import { cn } from "../lib/cn";
+
 import { Cog, Delete, Move, Package2, Trash2 } from "lucide-react";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "./ui/tabs";
+import { SliderBox, DrawInput, CheckBox } from "./common";
 
 const STORAGE_KEY = "gradient-editor-v1";
 
@@ -472,106 +470,4 @@ export default function GradientEditor() {
       <DownloadButton className="show-mobile bg-black shadow-2xl text-white p-4 rounded-md hover:bg-sky-700" />
     </div>
   );
-}
-
-function CheckBox({
-  keyName,
-  value,
-  label,
-  setStateValue,
-}: {
-  keyName: string;
-  value: boolean;
-  label: string;
-  setStateValue: (name: string, value: any) => void;
-}) {
-  return (
-    <label className="flex items-center">
-      <input
-        type="checkbox"
-        checked={value}
-        name={keyName}
-        onChange={(e) => setStateValue(keyName, e.target.checked)}
-        className="mr-2"
-      />
-      {label || <span>{keyName}</span>}
-    </label>
-  );
-}
-
-function SliderBox({
-  keyName,
-  value,
-  label,
-  min,
-  max,
-  unit,
-  setStateValue,
-}: {
-  keyName: string;
-  value: number;
-  label: string;
-  min: number;
-  max: number;
-  unit?: string;
-  setStateValue: (name: string, value: any) => void;
-}) {
-  return (
-    <>
-      <label className="block mb-2">
-        {label || <span>{keyName}</span>}: {value}
-        {unit && <span className="">{unit}</span>}
-      </label>
-      <Slider
-        min={min}
-        max={max}
-        name={keyName}
-        value={[value]}
-        onValueChange={(val) => setStateValue(keyName, val)}
-        className="w-full"
-      />
-    </>
-  );
-}
-
-function DrawInput({
-  keyName,
-  value,
-  placeholder,
-  label,
-  onChange: setStateValue,
-  isTextArea = false,
-  type = "text",
-  className = "",
-}: {
-  keyName: string;
-  value: string;
-  placeholder?: string;
-  label?: React.ReactNode;
-  onChange: (name: string, value: any) => void;
-  isTextArea?: boolean;
-  type?: string;
-  className?: string;
-}) {
-  return (
-    <div className={cn("mb-4", className)}>
-      <label className="block">{label || <span>{keyName}</span>}:</label>
-      {isTextArea ? (
-        <Textarea
-          value={value}
-          onChange={(e) => setStateValue(keyName, e.target.value)}
-          className="w-full px-2 border rounded-md"
-          placeholder={placeholder}
-        />
-      ) : (
-        <Input
-          type={type}
-          value={value}
-          onChange={(e) => setStateValue(keyName, e.target.value)}
-          className="w-full px-2 border rounded-md"
-          placeholder={placeholder}
-        />
-      )}
-    </div>
-  );
-}
+}