template_0205

RN_TEMPLATE/app/screens/ShowroomScreen/demos/DemoEmptyState.tsx

@@ -0,0 +1,77 @@
+/* eslint-disable react/jsx-key, react-native/no-inline-styles */
+import { EmptyState } from "@/components/EmptyState"
+import { s } from "@/utils/responsive"
+
+import { DemoDivider } from "../DemoDivider"
+import { Demo } from "./types"
+import { DemoUseCase } from "../DemoUseCase"
+
+export const DemoEmptyState: Demo = {
+  name: "EmptyState",
+  description: "demoEmptyState:description",
+  data: ({ theme }) => [
+    <DemoUseCase
+      name="demoEmptyState:useCase.presets.name"
+      description="demoEmptyState:useCase.presets.description"
+    >
+      <EmptyState preset="generic" />
+    </DemoUseCase>,
+
+    <DemoUseCase
+      name="demoEmptyState:useCase.passingContent.name"
+      description="demoEmptyState:useCase.passingContent.description"
+    >
+      <EmptyState
+        imageSource={require("@assets/images/logo.png")}
+        headingTx="demoEmptyState:useCase.passingContent.customizeImageHeading"
+        contentTx="demoEmptyState:useCase.passingContent.customizeImageContent"
+      />
+
+      <DemoDivider size={30} line />
+
+      <EmptyState
+        headingTx="demoEmptyState:useCase.passingContent.viaHeadingProp"
+        contentTx="demoEmptyState:useCase.passingContent.viaContentProp"
+        buttonTx="demoEmptyState:useCase.passingContent.viaButtonProp"
+      />
+
+      <DemoDivider size={30} line />
+
+      <EmptyState
+        headingTx="showroomScreen:demoViaSpecifiedTxProp"
+        headingTxOptions={{ prop: "heading" }}
+        contentTx="showroomScreen:demoViaSpecifiedTxProp"
+        contentTxOptions={{ prop: "content" }}
+        buttonTx="showroomScreen:demoViaSpecifiedTxProp"
+        buttonTxOptions={{ prop: "button" }}
+      />
+    </DemoUseCase>,
+
+    <DemoUseCase
+      name="demoEmptyState:useCase.styling.name"
+      description="demoEmptyState:useCase.styling.description"
+    >
+      <EmptyState
+        preset="generic"
+        style={{ backgroundColor: theme.colors.error, paddingVertical: s(20) }}
+        imageStyle={{ height: s(75), tintColor: theme.colors.palette.neutral100 }}
+        ImageProps={{ resizeMode: "contain" }}
+        headingStyle={{
+          color: theme.colors.palette.neutral100,
+          textDecorationLine: "underline",
+          textDecorationColor: theme.colors.palette.neutral100,
+        }}
+        contentStyle={{
+          color: theme.colors.palette.neutral100,
+          textDecorationLine: "underline",
+          textDecorationColor: theme.colors.palette.neutral100,
+        }}
+        buttonStyle={{ alignSelf: "center", backgroundColor: theme.colors.palette.neutral100 }}
+        buttonTextStyle={{ color: theme.colors.error }}
+        ButtonProps={{
+          preset: "reversed",
+        }}
+      />
+    </DemoUseCase>,
+  ],
+}