refactor: adjust all sample pages and use page components (#4118)

packages/effects/common-ui/src/components/page/index.ts

@@ -0,0 +1 @@
+export { default as Page } from './page.vue';

packages/effects/common-ui/src/components/page/page-footer.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'PageFooter',
+});
+</script>
+
+<template>
+  <div
+    class="bg-card align-center absolute bottom-0 left-0 right-0 flex px-6 py-4"
+  >
+    <slot></slot>
+  </div>
+</template>

packages/effects/common-ui/src/components/page/page-header.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { PageHeaderProps } from './page.ts';
+
+defineOptions({
+  name: 'PageHeader',
+});
+
+const props = defineProps<PageHeaderProps>();
+</script>
+
+<template>
+  <div class="bg-card px-6 py-4">
+    <div class="mb-2 flex justify-between text-xl font-bold leading-10">
+      {{ props.title }}
+    </div>
+    <slot></slot>
+  </div>
+</template>

packages/effects/common-ui/src/components/page/page.ts

@@ -0,0 +1,11 @@
+interface PageHeaderProps {
+  title?: string;
+  description?: string;
+}
+
+interface Props extends PageHeaderProps {
+  contentClass?: string;
+  showFooter?: boolean;
+}
+
+export type { PageHeaderProps, Props };

packages/effects/common-ui/src/components/page/page.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { Props } from './page';
+
+import PageFooter from './page-footer.vue';
+import PageHeader from './page-header.vue';
+
+defineOptions({
+  name: 'Page',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  description: '',
+  showFooter: false,
+  title: '',
+});
+</script>
+
+<template>
+  <div class="relative h-full">
+    <PageHeader
+      v-if="description || $slots.description || title"
+      :title="props.title"
+    >
+      <template #default>
+        <template v-if="description">{{ description }}</template>
+        <slot v-else name="description"></slot>
+      </template>
+    </PageHeader>
+    <div :class="contentClass" class="m-4">
+      <slot></slot>
+    </div>
+    <PageFooter v-if="props.showFooter">
+      <template #default>
+        <slot name="footer"></slot>
+      </template>
+    </PageFooter>
+  </div>
+</template>