Added title, tags, description, date created to product view

src/lib/Feature.svelte

@@ -1,21 +0,0 @@
-<script>
-	import { urlFor } from '$lib/sanityClient';
-	import { currentProduct } from '$lib/stores';
-</script>
-
-<div class="content">
-	<p>{$currentProduct.name}</p>
-	{#if $currentProduct.image}
-		<img src={urlFor($currentProduct.image).url()} alt={$currentProduct.name} />
-	{/if}
-</div>
-
-<style>
-	.content {
-		width: calc(100% - 160px);
-		margin-left: 160px;
-		float: left;
-		margin-top: 48px;
-		padding: 0 32px;
-	}
-</style>

src/lib/Feature/Feature.svelte

@@ -0,0 +1,47 @@
+<script>
+	import { urlFor } from '$lib/sanityClient';
+	import { currentProduct } from '$lib/stores';
+	import Tag from './Tag/Tag.svelte';
+	console.log($currentProduct);
+
+	const { container, name, description, productInfo, date, tags, img } = {
+		container: 'flex m-8 gap-8',
+		productInfo: 'flex flex-col gap-2',
+		name: 'font-bold text-2xl',
+		description: '',
+		date: 'text-xs w-2/3',
+		tags: 'flex gap-1',
+		img: 'm-8'
+	};
+</script>
+
+<div class={container}>
+	{#if $currentProduct.image}
+		<img
+			src={urlFor($currentProduct.image).url()}
+			class={img}
+			width={300}
+			alt={$currentProduct.name}
+		/>
+	{/if}
+	<div class={productInfo}>
+		<p class={name}>{$currentProduct.name}</p>
+		{#if $currentProduct.tags}
+			<div class={tags}>
+				{#each $currentProduct.tags as tag}
+					<Tag {tag} />
+				{/each}
+			</div>
+		{/if}
+		{#if $currentProduct.description}
+			<p class={description}>{$currentProduct.description}</p>
+		{/if}
+		<p class={date}>Created on: {new Date($currentProduct._createdAt)}</p>
+	</div>
+</div>
+
+<style>
+	img {
+		image-rendering: pixelated;
+	}
+</style>

src/lib/Feature/Tag/Tag.svelte

@@ -0,0 +1,13 @@
+<script>
+  export let tag;
+  import { tags } from '$lib/stores';
+
+  const tagName = ($tags.find((dirTag) => dirTag._id === tag._ref)).name
+
+  const { container } = {
+    container: 'text-sm flex rounded-md pl-2 pr-2 pt-1 pb-1 bg-gray-200'
+  }
+
+</script>
+
+<p class={container}>{tagName}</p>

src/routes/index.svelte

@@ -1,6 +1,6 @@
 <script>
 	import Grid from '$lib/Grid.svelte';
-	import Feature from '$lib/Feature.svelte';
+	import Feature from '$lib/Feature/Feature.svelte';
 	import { products, productsView, tags, currentProduct } from '$lib/stores';
 	import { browser } from '$app/env';
 	import {normalize, parseSlug } from '$helpers';