diff --git a/frontend/index.html b/frontend/index.html
index 963d0a0..133acfc 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -5,9 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
- <style>
- @import "tailwindcss";
- </style>
+ <link rel="stylesheet" href="./src/styles.css" />
</head>
<body>
<div id="app"></div>
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index bf789c6..13113ac 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,6 +8,7 @@
"dependencies": {
"@sveltejs/vite-plugin-svelte": "^5.0.3",
"@tailwindcss/vite": "^4.1.3",
+ "daisyui": "^5.0.18",
"prettier": "^3.5.3",
"prettier-plugin-css-order": "^2.1.2",
"prettier-plugin-svelte": "^3.3.3",
@@ -1066,6 +1067,15 @@
"postcss": "^8.0.9"
}
},
+ "node_modules/daisyui": {
+ "version": "5.0.18",
+ "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.0.18.tgz",
+ "integrity": "sha512-UKbuXChAZYhhjEGs9iKU3dSOup+WDY8fZaGa9VF4GkFQsF0ZAkb3yPTqjFUiE+2r3zFxv8JX+yhc06JPQbzqmw==",
+ "license": "MIT",
+ "funding": {
+ "url": "https://github.com/saadeghi/daisyui?sponsor=1"
+ }
+ },
"node_modules/debug": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index e785ba3..c919e34 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,9 +1,10 @@
{
- "name": "svelte-hello",
+ "name": "ytlean",
"type": "module",
"dependencies": {
"@sveltejs/vite-plugin-svelte": "^5.0.3",
"@tailwindcss/vite": "^4.1.3",
+ "daisyui": "^5.0.18",
"prettier": "^3.5.3",
"prettier-plugin-css-order": "^2.1.2",
"prettier-plugin-svelte": "^3.3.3",
diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index 860f640..36f5237 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -11,7 +11,9 @@
videoId = "";
try {
- const res = await fetch(`http://localhost:8000/video?channel_name=${channelName}`);
+ const res = await fetch(
+ `http://localhost:8000/video?channel_name=${channelName}`,
+ );
if (!res.ok) throw new Error("Channel not found or API error");
const data = await res.json();
videoId = data.id;
@@ -28,37 +30,43 @@
}
</script>
-<main class="min-h-screen bg-gray-100 flex flex-col items-center justify-center p-6">
- <h1 class="text-4xl font-extrabold mb-6">YouTube Latest Video Finder</h1>
+<main
+ class="flex min-h-screen flex-col items-center justify-center space-y-6 p-6"
+>
+ <h1 class="text-4xl font-extrabold">YTLean</h1>
- <form on:submit={handleSubmit} class="flex flex-col sm:flex-row items-center gap-4">
+ <form
+ on:submit={handleSubmit}
+ class="flex flex-col items-center gap-4 sm:flex-row"
+ >
<input
type="text"
bind:value={channelName}
placeholder="Enter channel name"
- class="px-4 py-2 border border-gray-300 rounded-md w-72"
+ class="input"
/>
- <button
- type="submit"
- disabled={loading}
- class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
- >
- {loading ? "Loading..." : "Get Latest Video"}
+ <button type="submit" disabled={loading} class="btn btn-primary">
+ {#if loading}
+ <span class="loading loading-spinner"></span> Loading...
+ {:else}
+ Get Latest Video
+ {/if}
</button>
</form>
{#if error}
- <p class="text-red-600 mt-4 text-sm">{error}</p>
+ <p class="text-error-content mt-4 text-sm">{error}</p>
{/if}
{#if videoId}
- <div class="mt-8 w-full flex justify-center">
+ <div
+ class="aspect-video w-full max-w-6xl overflow-hidden rounded-lg shadow-lg"
+ >
<iframe
title="video"
- width="560"
- height="315"
src={`https://www.youtube.com/embed/${videoId}?rel=0`}
- class="rounded-lg shadow-lg"
+ class="h-full w-full"
+ allowfullscreen
></iframe>
</div>
{/if}
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
new file mode 100644
index 0000000..dc1289f
--- /dev/null
+++ b/frontend/src/styles.css
@@ -0,0 +1,6 @@
+@import "tailwindcss";
+@plugin "daisyui" {
+ theme:
+ light --default,
+ dark --prefersdark;
+}
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 54eaba8..baafe5d 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -1,11 +1,7 @@
-import tailwindcss from "@tailwindcss/vite"
+import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
-
export default defineConfig({
- plugins: [
- svelte(),
- tailwindcss()
- ],
+ plugins: [svelte(), tailwindcss()],
});