feat: update create success screen

Author: mychidarko

src/ui/src/pages/@types/CreateScreen.ts

@@ -8,6 +8,7 @@ export interface WalkthroughSelections {
     docker?: boolean;
     testing?: 'pest' | 'phpunit';
     review?: boolean;
+    directory?: string;
 }
 
 export type WalkthroughSteps = keyof WalkthroughSelections;

src/ui/src/pages/Create/ReviewScreen.tsx

@@ -18,8 +18,8 @@ const ReviewScreen: React.FC<React.PropsWithChildren<CreateSubScreenProps>> = ({
     navigate,
     setValues,
 }) => {
-    const [, setScreen] = useStore('screen');
     const [loading, setLoading] = useState(false);
+    const [success, setSuccess] = useState(false);
 
     const appType = themes.find((theme) => theme.key === values.type);
     const templateEngine = templateEngines.find(
@@ -62,10 +62,12 @@ const ReviewScreen: React.FC<React.PropsWithChildren<CreateSubScreenProps>> = ({
                 }
             })
             .then((response) => {
-                // setValues({});
+                setValues({
+                    ...values,
+                    ...response?.data,
+                });
 
-                console.log(response, 'response');
-                // setScreen('home');
+                setSuccess(true);
             })
             .catch((err) => {
                 console.log('An error occurred', err);
@@ -77,6 +79,12 @@ const ReviewScreen: React.FC<React.PropsWithChildren<CreateSubScreenProps>> = ({
 
     return loading ? (
         <LoadingSection />
+    ) : success ? (
+        <SuccessSection
+            values={values}
+            setValues={setValues}
+            navigate={navigate}
+        />
     ) : (
         <>
             <div className="px-5 lg:px-10">
@@ -326,4 +334,54 @@ const LoadingSection = () => {
     );
 };
 
+const SuccessSection: React.FC<CreateSubScreenProps> = ({
+    values,
+}) => {
+    const [, setScreen] = useStore('screen');
+
+    return (
+        <div className="px-5 lg:px-10 h-[80vh] flex flex-col justify-center items-center">
+            <div className="mb-8 text-center ">
+                <h2 className="text-2xl">
+                    Your {values.type} app has been created!
+                </h2>
+                <p className="text-gray-500">
+                    To get started, you can follow these steps:
+                </p>
+            </div>
+
+            <pre className="flex flex-col gap-4 w-full bg-gray-100 rounded-lg p-5">
+                <div className="flex items-center gap-2">
+                    <div>$</div>
+                    <div>cd {values?.directory ?? values.name}</div>
+                </div>
+                {!!(
+                    values?.additionalFrontendOptions ||
+                    values?.frontendFramework
+                ) && (
+                    <div className="flex items-center gap-2">
+                        <div>$</div>
+                        <div>leaf view:dev</div>
+                    </div>
+                )}
+                <div className="flex items-center gap-2">
+                    <div>$</div>
+                    <div>leaf serve</div>
+                </div>
+            </pre>
+
+            <div className="mt-8">
+                <button
+                    className="bg-green-800 px-5 py-2 rounded-md text-white"
+                    onClick={() => {
+                        setScreen('home');
+                    }}
+                >
+                    Go Home
+                </button>
+            </div>
+        </div>
+    );
+};
+
 export default ReviewScreen;