diff --git a/eslint.config.js b/eslint.config.js index 62dbd03..29baf00 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -29,5 +29,13 @@ export default [ }, { ignores: ['build/', '.svelte-kit/', 'dist/'] + }, + { + rules: { + '@typescript-eslint/no-unused-vars': [ + 'error', + { argsIgnorePattern: '^_', varsIgnorePattern: '^_' } + ] + } } ]; diff --git a/package.json b/package.json index 6d19666..36fcc49 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "dayjs": "^1.11.13", "svelte-fa": "^4.0.2", "tailwind-merge": "^2.5.2", + "tailwind-scrollbar": "^3.1.0", "tailwind-variants": "^0.2.1" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8347ed3..faf8560 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -26,6 +26,9 @@ importers: tailwind-merge: specifier: ^2.5.2 version: 2.5.2 + tailwind-scrollbar: + specifier: ^3.1.0 + version: 3.1.0(tailwindcss@3.4.10) tailwind-variants: specifier: ^0.2.1 version: 0.2.1(tailwindcss@3.4.10) @@ -1655,6 +1658,12 @@ packages: tailwind-merge@2.5.2: resolution: {integrity: sha512-kjEBm+pvD+6eAwzJL2Bi+02/9LFLal1Gs61+QB7HvTfQQ0aXwC5LGT8PEt1gS0CWKktKe6ysPTAy3cBC5MeiIg==} + tailwind-scrollbar@3.1.0: + resolution: {integrity: sha512-pmrtDIZeHyu2idTejfV59SbaJyvp1VRjYxAjZBH0jnyrPRo6HL1kD5Glz8VPagasqr6oAx6M05+Tuw429Z8jxg==} + engines: {node: '>=12.13.0'} + peerDependencies: + tailwindcss: 3.x + tailwind-variants@0.2.1: resolution: {integrity: sha512-2xmhAf4UIc3PijOUcJPA1LP4AbxhpcHuHM2C26xM0k81r0maAO6uoUSHl3APmvHZcY5cZCY/bYuJdfFa4eGoaw==} engines: {node: '>=16.x', pnpm: '>=7.x'} @@ -3359,6 +3368,10 @@ snapshots: tailwind-merge@2.5.2: {} + tailwind-scrollbar@3.1.0(tailwindcss@3.4.10): + dependencies: + tailwindcss: 3.4.10 + tailwind-variants@0.2.1(tailwindcss@3.4.10): dependencies: tailwind-merge: 2.5.2 diff --git a/src/lib/assets/images/sucuHomeBanner1.png b/src/lib/assets/images/sucuHomeBanner1.png new file mode 100644 index 0000000..6978e2d Binary files /dev/null and b/src/lib/assets/images/sucuHomeBanner1.png differ diff --git a/src/lib/assets/images/sucuHomeBanner2.png b/src/lib/assets/images/sucuHomeBanner2.png new file mode 100644 index 0000000..49114b4 Binary files /dev/null and b/src/lib/assets/images/sucuHomeBanner2.png differ diff --git a/src/lib/assets/images/sucuHomeBanner3.png b/src/lib/assets/images/sucuHomeBanner3.png new file mode 100644 index 0000000..80d6f75 Binary files /dev/null and b/src/lib/assets/images/sucuHomeBanner3.png differ diff --git a/src/lib/components/AnnoucementCard/AnnoucementCard.svelte b/src/lib/components/AnnouncementCard/AnnouncementCard.svelte similarity index 83% rename from src/lib/components/AnnoucementCard/AnnoucementCard.svelte rename to src/lib/components/AnnouncementCard/AnnouncementCard.svelte index 547657a..d3080ab 100644 --- a/src/lib/components/AnnoucementCard/AnnoucementCard.svelte +++ b/src/lib/components/AnnouncementCard/AnnouncementCard.svelte @@ -13,6 +13,7 @@ export let createdAt: string; export let createdBy: string; export let linkHref: string; + export let className = ''; function formatDate(dateString: string): string { return dayjs(dateString).locale('th').format('DD MMMM BBBB'); @@ -38,7 +39,7 @@
{#if imageURL || imageURL.length > 0} @@ -90,3 +91,16 @@
+ + diff --git a/src/lib/components/Playground.svelte b/src/lib/components/Playground.svelte index 0c83214..491dd5e 100644 --- a/src/lib/components/Playground.svelte +++ b/src/lib/components/Playground.svelte @@ -13,7 +13,7 @@ import TabsList from './Tabs/TabsList.svelte'; import TabsTrigger from './Tabs/TabsTrigger.svelte'; import TabsContent from './Tabs/TabsContent.svelte'; - import AnnoucementCard from './AnnoucementCard/AnnoucementCard.svelte'; + import AnnouncementCard from './AnnouncementCard/AnnouncementCard.svelte'; import thumbnail from '../assets/images/thumbnail.png'; import OrganizationCard from './OrganizationCard/OrganizationCard.svelte'; @@ -79,7 +79,7 @@ 'ปีย้าวยาวววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววว' ]; - const annoucementCard = Array(3).fill({ + const announcementCard = Array(3).fill({ imageURL: thumbnail, title: 'ประกาศจุฬาลงกรณ์มหาวิทยาลัย เรื่อง การไปต่างประเทศหรือการเข้ามาในประเทศเพื่อศึกษา อบรม วิจัย หรือปฏิบัติงาน ในสถานการณ์ปัจจุบัน ลงวันที่ 22 พฤศจิกายน 2565', @@ -88,7 +88,7 @@ linkHref: 'https://www.google.com' }); - annoucementCard.push({ + announcementCard.push({ imageURL: '', title: 'ประกาศรับสมัครคณะกรรมาธิการวิสามัญพิจารณางบประมาณสโมสรนิสิตฯ', createdAt: '2024-07-04', @@ -287,8 +287,8 @@

Announcement Card

- {#each annoucementCard as card} - + import { typography } from '../../styles/tailwind/typography'; + import { cn } from '../../lib/utils/cn'; + import Button from '../../lib/components/Button.svelte'; + import sucuHomeBanner1 from '../../lib/assets/images/sucuHomeBanner1.png'; + import sucuHomeBanner2 from '../../lib/assets/images/sucuHomeBanner2.png'; + import sucuHomeBanner3 from '../../lib/assets/images/sucuHomeBanner3.png'; + import AnnouncementCard from '$lib/components/AnnouncementCard/AnnouncementCard.svelte'; + import OrganizationCard from '$lib/components/OrganizationCard/OrganizationCard.svelte'; + import thumbnail from '../../lib/assets/images/thumbnail.png'; + import { onMount } from 'svelte'; + + const announcementCard = Array(6).fill({ + imageURL: thumbnail, + title: + 'ประกาศจุฬาลงกรณ์มหาวิทยาลัย เรื่อง การไปต่างประเทศหรือการเข้ามาในประเทศเพื่อศึกษา อบรม วิจัย หรือปฏิบัติงาน ในสถานการณ์ปัจจุบัน ลงวันที่ 22 พฤศจิกายน 2565', + createdAt: '2024-07-04', + createdBy: 'สภานิสิต', + linkHref: 'https://www.google.com' + }); + + announcementCard.push({ + imageURL: '', + title: 'ประกาศรับสมัครคณะกรรมาธิการวิสามัญพิจารณางบประมาณสโมสรนิสิตฯ', + createdAt: '2024-07-04', + createdBy: 'สภานิสิต', + linkHref: 'https://www.google.com' + }); + + let container: HTMLDivElement; + let activeSlide = 0; + + function handleScroll() { + const scrollLeft = container.scrollLeft; + const cardWidth = 140; + const cardCount = announcementCard.length; + const cardGap = 2.5; + const threshold = (cardWidth + cardGap) / 3; + const currentCardIndex = Math.floor((scrollLeft + threshold) / (cardWidth + cardGap)); + + activeSlide = Math.min(currentCardIndex, cardCount - 1); + } + + onMount(() => { + container.addEventListener('scroll', handleScroll); + }); + + +
+
+
+
+
+ สโมสรนิสิต +
+
+ จุฬาลงกรณ์มหาวิทยาลัย +
+
+ Student Union, Chulalongkorn University +
+
+ +
+
+ +
+
+
+ ประกาศ +
+
+ ประกาศล่าสุดของสโมสรนิสิตจุฬาฯ อบจ. และสภานิสิตจุฬาฯ +
+
+ +
+
+
+ {#each announcementCard as card} + + {/each} +
+
+
+
+
+ ประกาศ +
+
+ ประกาศล่าสุดของสโมสรนิสิตจุฬาฯ อบจ. และสภานิสิตจุฬาฯ +
+
+
+ {#each announcementCard as card} + + {/each} +
+
+ {#each announcementCard as _, index} +
+ {/each} +
+
+ +
+
+ + banner + banner + +
+
+
+
+
+
+
+ +
+
+ 3 องค์กรหลักในจุฬาฯ +
+
+ +
+
+
+
diff --git a/tailwind.config.js b/tailwind.config.js index 4b80e1e..834008d 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -2,6 +2,7 @@ import { colorScheme } from './src/styles/tailwind/color'; import { boxShadow } from './src/styles/tailwind/shadow'; import { borderRadius } from './src/styles/tailwind/borderRadius'; +import tailwindScrollbar from 'tailwind-scrollbar'; export default { content: ['./src/**/*.{html,js,svelte,ts}'], theme: { @@ -11,5 +12,5 @@ export default { borderRadius: borderRadius } }, - plugins: [] + plugins: [tailwindScrollbar] };