Feat/list

package.json

@@ -40,6 +40,7 @@
 		"@fortawesome/free-brands-svg-icons": "^6.6.0",
 		"@fortawesome/free-solid-svg-icons": "^6.6.0",
 		"clsx": "^2.1.1",
+		"dayjs": "^1.11.13",
 		"svelte-fa": "^4.0.2",
 		"tailwind-merge": "^2.5.2",
 		"tailwind-variants": "^0.2.1"

src/lib/components/List/List.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { type Variant, listVariants } from '../../../styles/tailwind/list';
+	import { typography } from '../../../styles/tailwind/typography';
+	import { cn } from '../../utils/cn';
+	import dayjs from 'dayjs';
+	import buddhistEra from 'dayjs/plugin/buddhistEra';
+	import 'dayjs/locale/th';
+
+	dayjs.extend(buddhistEra);
+
+	export let title: string;
+	export let createdAt: string;
+	export let createdBy: string;
+	export let linkHref: string;
+	export let variant: Variant;
+
+	function formatDate(dateString: string): string {
+		return dayjs(dateString).locale('th').format('DD MMMM BBBB');
+	}
+</script>
+
+<a
+	href={linkHref}
+	target="_blank"
+	class={`h-auto w-[761px] flex flex-col py-3 px-4 max-md:w-[390px] rounded ${listVariants({ variant })}`}
+>
+	<div
+		class={cn(
+			'text-ellipsis whitespace-nowrap overflow-hidden',
+			typography({ variant: 'body-large' }),
+			`max-md:${typography({ variant: 'body-normal' })}`
+		)}
+	>
+		{title}
+	</div>
+
+	<div
+		class={cn(
+			`max-md:${typography({ variant: 'body-small' })}`,
+			typography({ variant: 'body-normal' })
+		)}
+	>
+		{formatDate(createdAt)} โดย {createdBy}
+	</div>
+</a>

src/lib/components/Playground.svelte

@@ -4,6 +4,7 @@
 	import TabCapsuleItem from './TabCapsule.svelte';
 	import Modal from '$lib/components/Modal/Modal.svelte';
 	import { modalShow } from './Modal/store';
+	import List from './List/List.svelte';
 
 	modalShow.set(false);
 
@@ -150,14 +151,40 @@
 		{/if}
 	</section>
 
-	<section class="section w-fit">
+	<section class="section mb-5">
 		<h2 class="font-bold text-2xl mb-4">Modal</h2>
 		<Button variant="default" size="default" on:click={() => showModal()}>Click For Modal</Button>
 
 		{#if modalShow}
 			<Modal />
 		{/if}
 	</section>
+
+	<section class="section mb-5 gap-y-5 flex flex-col">
+		<h2 class="font-bold text-2xl mb-4">List</h2>
+
+		<List
+			variant="pink"
+			title="Title Longgggggggggggggggggggggggggggggggggggggggggggggggggggg"
+			createdAt="2022-01-01"
+			createdBy="Admin"
+			linkHref="https://google.com"
+		/>
+		<List
+			variant="grey"
+			title="Title Longgggggggggggggggggggggggggggggggggggggggggggggggggggg"
+			createdAt="2022-01-01"
+			createdBy="Admin"
+			linkHref="https://google.com"
+		/>
+		<List
+			variant="default"
+			title="Title Longgggggggggggggggggggggggggggggggggggggggggggggggggggg"
+			createdAt="2022-01-01"
+			createdBy="Admin"
+			linkHref="https://google.com"
+		/>
+	</section>
 </div>
 
 <style>

src/styles/tailwind/list.ts

@@ -0,0 +1,17 @@
+import { tv, type VariantProps } from 'tailwind-variants';
+
+export const listVariants = tv({
+	base: 'rounded-lg p-4',
+	variants: {
+		variant: {
+			pink: 'bg-sucu-pink-05',
+			grey: 'bg-sucu-gray-light',
+			default: 'bg-white'
+		}
+	},
+	defaultVariants: {
+		variant: 'default'
+	}
+});
+
+export type Variant = VariantProps<typeof listVariants>['variant'];