fix(story): add header design (#15)

## What? This PR adds header design. https://github.com/storyblok/space-tool-plugins/assets/499898/00ed62d4-37e8-4f89-8b15-92c228a209e9 I added a functionality to attach right action buttons, which is hidden at the moment.
storyblok · Dec 12, 2023 · 096acc3 · 096acc3
1 parent 4420f14
commit 096acc3
Show file tree

Hide file tree

Showing 6 changed files with 183 additions and 44 deletions.
diff --git a/story-starter/pnpm-lock.yaml b/story-starter/pnpm-lock.yaml
diff --git a/story-starter/starters/nuxt/assets/css/main.css b/story-starter/starters/nuxt/assets/css/main.css
@@ -1,3 +1,12 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+html,
+body {
+	@apply !bg-white;
+}
+
+* {
+	@apply font-sans;
+}
diff --git a/story-starter/starters/nuxt/components/Header.vue b/story-starter/starters/nuxt/components/Header.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const props = defineProps<{
+	title: string;
+}>();
+</script>
+
+<template>
+	<div class="flex items-center gap-4">
+		<div class="w-10 h-10 p-2 bg-gray-100 rounded-lg">
+			<slot name="icon"></slot>
+		</div>
+		<h1 class="text-2xl font-bold grow text-base-content">
+			{{ props.title }}
+		</h1>
+		<div>
+			<slot name="right-action-bar"></slot>
+		</div>
+	</div>
+	<div class="mt-2 ml-14">
+		<div class="text-sm font-light text-gray-500">
+			<slot name="description"></slot>
+		</div>
+	</div>
+</template>
diff --git a/story-starter/starters/nuxt/nuxt.config.ts b/story-starter/starters/nuxt/nuxt.config.ts
@@ -2,10 +2,16 @@
 export default defineNuxtConfig({
 	devtools: { enabled: true },
 	css: ['~/assets/css/main.css'],
+	modules: ['nuxt-lucide-icons', '@nuxtjs/google-fonts'],
 	postcss: {
 		plugins: {
 			tailwindcss: {},
 			autoprefixer: {},
 		},
 	},
+	googleFonts: {
+		families: {
+			Roboto: [300, 400, 700],
+		},
+	},
 });
diff --git a/story-starter/starters/nuxt/package.json b/story-starter/starters/nuxt/package.json
@@ -18,10 +18,12 @@
 	},
 	"devDependencies": {
 		"@nuxt/devtools": "latest",
+		"@nuxtjs/google-fonts": "3.1.0",
 		"autoprefixer": "10.4.16",
 		"daisyui": "^4.4.19",
 		"h3": "^1.8.2",
 		"nuxt": "^3.8.0",
+		"nuxt-lucide-icons": "1.0.3",
 		"postcss": "8.4.32",
 		"tailwindcss": "3.3.6",
 		"vue": "^3.3.4",

diff --git a/story-starter/starters/nuxt/pages/index.vue b/story-starter/starters/nuxt/pages/index.vue
@@ -38,53 +38,73 @@ const onChange = (event: any, id: number) => {
 	<span v-if="isLoading">Loading...</span>
 	<span v-if="error">Error: {{ error.message }}</span>
 	<div v-if="data">
-		<p>Number of selected stories {{ selectedStories.length }}</p>
-		<button class="btn" @click="selectAll">Select All</button>
-		<button class="btn" @click="unselectAll">Unselect All</button>
-		<div v-for="(story, index) in data.stories" :key="index">
-			<div class="form-control">
-				<label class="label cursor-pointer justify-start gap-2">
-					<input
-						class="checkbox"
-						type="checkbox"
-						:id="story.id.toString()"
-						:name="story.id.toString()"
-						@change="(e) => onChange(e, story.id)"
-						:checked="isStorySelected(story.id)"
-					/>
-					<label class="label-text" :for="story.id.toString()"
-						>{{ story.name }} (/{{ story.slug }})</label
-					>
-				</label>
-			</div>
-		</div>
+		<div class="mx-20 my-11">
+			<Header title="Story Starter">
+				<template #icon>
+					<LucideTornado class="text-primary" />
+				</template>
+				<template #description>
+					Dive into the largest keyword research database on the market, get
+					additional keywords to enhance your website contextual background, and
+					improve your SEO.
+				</template>
+				<!-- <template #right-action-bar>
+					<button class="btn btn-outline">
+						<span class="text-base">Settings</span><LucideSettings :size="16" />
+					</button>
+				</template> -->
+			</Header>
 
-		<p>Current Page {{ currentPage }}</p>
+			<div class="mt-10">
+				<p>Number of selected stories {{ selectedStories.length }}</p>
+				<button class="btn" @click="selectAll">Select All</button>
+				<button class="btn" @click="unselectAll">Unselect All</button>
+				<div v-for="(story, index) in data.stories" :key="index">
+					<div class="form-control">
+						<label class="justify-start gap-2 cursor-pointer label">
+							<input
+								class="checkbox"
+								type="checkbox"
+								:id="story.id.toString()"
+								:name="story.id.toString()"
+								@change="(e) => onChange(e, story.id)"
+								:checked="isStorySelected(story.id)"
+							/>
+							<label class="label-text" :for="story.id.toString()"
+								>{{ story.name }} (/{{ story.slug }})</label
+							>
+						</label>
+					</div>
+				</div>
 
-		<div class="join">
-			<button
-				class="btn btn-ghost btn-sm join-item"
-				@click="goToPage(currentPage - 1)"
-				:disabled="!hasPreviousPage"
-			>
-				Previous Page
-			</button>
-			<div v-for="(_item, idx) in new Array(numberOfPages)">
-				<button
-					class="btn btn-ghost btn-sm join-item"
-					:disabled="currentPage === idx + 1"
-					@click="goToPage(idx + 1)"
-				>
-					{{ idx + 1 }}
-				</button>
+				<p>Current Page {{ currentPage }}</p>
+
+				<div class="join">
+					<button
+						class="btn btn-ghost btn-sm join-item"
+						@click="goToPage(currentPage - 1)"
+						:disabled="!hasPreviousPage"
+					>
+						Previous Page
+					</button>
+					<div v-for="(_item, idx) in new Array(numberOfPages)">
+						<button
+							class="btn btn-ghost btn-sm join-item"
+							:disabled="currentPage === idx + 1"
+							@click="goToPage(idx + 1)"
+						>
+							{{ idx + 1 }}
+						</button>
+					</div>
+					<button
+						class="btn btn-ghost btn-sm join-item"
+						@click="goToPage(currentPage + 1)"
+						:disabled="!hasNextPage"
+					>
+						Next Page
+					</button>
+				</div>
 			</div>
-			<button
-				class="btn btn-ghost btn-sm join-item"
-				@click="goToPage(currentPage + 1)"
-				:disabled="!hasNextPage"
-			>
-				Next Page
-			</button>
 		</div>
 	</div>
 </template>