feat: common emptystate

ui/src/modules/common/components/EmptyState.tsx

@@ -0,0 +1,74 @@
+import { PlayCircle, Plus, GitCommit } from "@phosphor-icons/react"
+import { Button } from "antd"
+import { EmptyStateType, EmptyStateConfig } from "../../../utils/constants"
+
+interface EmptyStateProps {
+	type: EmptyStateType
+	onButtonClick: () => void
+}
+
+const EmptyState = ({ type, onButtonClick }: EmptyStateProps) => {
+	const config = EmptyStateConfig[type]
+	return (
+		<div className="flex flex-col items-center justify-center py-16">
+			<img
+				src={config.image}
+				alt={`${type} empty state`}
+				className="mb-8 h-64 w-96"
+			/>
+
+			<div className={`mb-2 text-[#193AE6]`}>Welcome User !</div>
+
+			<h2 className="mb-2 text-2xl font-bold">
+				Ready to run your first {config.title}
+			</h2>
+
+			<p className={`mb-8 text-[#0A0A0A]`}>
+				Get started and experience the speed of OLake by setting up
+				{config.description}
+			</p>
+
+			<Button
+				type="primary"
+				className={`mb-12 px-6 py-4 ${
+					type === EmptyStateType.JOB
+						? "border-[#193AE6] bg-[#193AE6] text-white"
+						: "border-[#D9D9D9] bg-white text-black"
+				}`}
+				onClick={onButtonClick}
+			>
+				{type === EmptyStateType.JOB ? <GitCommit /> : <Plus />}
+				{config.buttonText}
+			</Button>
+			{config.tutorial && (
+				<div className="w-[412px] rounded-xl border-[1px] border-[#D9D9D9] bg-white p-4 shadow-sm">
+					<div className="flex items-center gap-4">
+						<a
+							href={config.tutorial.link}
+							target="_blank"
+							rel="noopener noreferrer"
+							className="cursor-pointer"
+						>
+							<img
+								src={config.tutorial.image}
+								alt={`${type} tutorial`}
+								className="rounded-lg transition-opacity hover:opacity-80"
+							/>
+						</a>
+						<div className="flex-1">
+							<div className="mb-1 flex items-center gap-1 text-xs">
+								<PlayCircle color="#9f9f9f" />
+								<span className="text-[#9F9F9F]">OLake/ Tutorial</span>
+							</div>
+							<div className="text-xs">
+								Checkout this tutorial, to know more about {type.toLowerCase()}
+							</div>
+						</div>
+					</div>
+				</div>
+			)}
+		</div>
+	)
+}
+
+export default EmptyState

ui/src/modules/destinations/pages/Destinations.tsx

@@ -6,8 +6,9 @@ import { Button, Tabs, Empty, message, Spin } from "antd"
 import analyticsService from "../../../api/services/analyticsService"
 import { useAppStore } from "../../../store"
 import { Entity } from "../../../types"
-import { destinationTabs } from "../../../utils/constants"
-import DestinationEmptyState from "../components/DestinationEmptyState"
+
+import { destinationTabs, EmptyStateType } from "../../../utils/constants"
+import EmptyState from "../../common/components/EmptyState"
 import DestinationTable from "../components/DestinationTable"
 
 const Destinations: React.FC = () => {
@@ -128,8 +129,9 @@ const Destinations: React.FC = () => {
 							/>
 						</div>
 					) : tab.key === "active" && showEmpty ? (
-						<DestinationEmptyState
-							handleCreateDestination={handleCreateDestination}
+						<EmptyState
+							type={EmptyStateType.DESTINATION}
+							onButtonClick={handleCreateDestination}
 						/>
 					) : filteredDestinations().length === 0 ? (
 						<Empty

ui/src/modules/jobs/pages/Jobs.tsx

@@ -2,14 +2,14 @@ import { useState, useEffect } from "react"
 import { useNavigate } from "react-router-dom"
 import { Button, Tabs, Empty, message, Spin } from "antd"
 import { GitCommit, Plus } from "@phosphor-icons/react"
-
+import { EmptyStateType } from "../../../utils/constants"
 import { useAppStore } from "../../../store"
 import { jobService } from "../../../api"
 import analyticsService from "../../../api/services/analyticsService"
 import { JobType } from "../../../types/jobTypes"
 import { JOB_TYPES } from "../../../utils/constants"
 import JobTable from "../components/JobTable"
-import JobEmptyState from "../components/JobEmptyState"
+import EmptyState from "../../common/components/EmptyState"
 import DeleteJobModal from "../../common/Modals/DeleteJobModal"
 
 const Jobs: React.FC = () => {
@@ -197,7 +197,10 @@ const Jobs: React.FC = () => {
 							/>
 						</div>
 					) : tab.key === JOB_TYPES.ACTIVE && showEmpty ? (
-						<JobEmptyState handleCreateJob={handleCreateJob} />
+						<EmptyState
+							type={EmptyStateType.JOB}
+							onButtonClick={handleCreateJob}
+						/>
 					) : filteredJobs.length === 0 ? (
 						<Empty
 							image={Empty.PRESENTED_IMAGE_SIMPLE}

ui/src/modules/sources/pages/Sources.tsx

@@ -2,13 +2,13 @@ import { useState, useEffect } from "react"
 import { useNavigate } from "react-router-dom"
 import { Button, Tabs, Empty, message, Spin } from "antd"
 import { LinktreeLogo, Plus } from "@phosphor-icons/react"
-
+import EmptyState from "../../common/components/EmptyState"
 import { useAppStore } from "../../../store"
 import analyticsService from "../../../api/services/analyticsService"
 import { Entity } from "../../../types"
-import { sourceTabs } from "../../../utils/constants"
+import {EmptyStateType, sourceTabs } from "../../../utils/constants"
 import SourceTable from "../components/SourceTable"
-import SourceEmptyState from "../components/SourceEmptyState"
+
 
 const Sources: React.FC = () => {
 	const [activeTab, setActiveTab] = useState("active")
@@ -130,7 +130,10 @@ const Sources: React.FC = () => {
 							/>
 						</div>
 					) : tab.key === "active" && showEmpty ? (
-						<SourceEmptyState handleCreateSource={handleCreateSource} />
+						<EmptyState
+							type={EmptyStateType.SOURCE}
+							onButtonClick={handleCreateSource}
+						/>
 					) : filteredSources().length === 0 ? (
 						<Empty
 							image={Empty.PRESENTED_IMAGE_SIMPLE}