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 _, index}
+
+ {/each}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 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]
};