hadeed/ytlean
1
Fork 0
Code Activity

Use daisyui

Browse source
This commit is contained in:
Hadeed 2025-04-11 05:46:02 +05:00
parent 3f453bc3b5
commit 87039087b1
6 changed files with 45 additions and 26 deletions

4
frontend/index.html
View file

@ -5,9 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title> <title>Document</title>
<style> <link rel="stylesheet" href="./src/styles.css" />
@import "tailwindcss";
</style>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

10
frontend/package-lock.json generated
View file

@ -8,6 +8,7 @@
"dependencies": { "dependencies": {
"@sveltejs/vite-plugin-svelte": "^5.0.3", "@sveltejs/vite-plugin-svelte": "^5.0.3",
"@tailwindcss/vite": "^4.1.3", "@tailwindcss/vite": "^4.1.3",
"daisyui": "^5.0.18",
"prettier": "^3.5.3", "prettier": "^3.5.3",
"prettier-plugin-css-order": "^2.1.2", "prettier-plugin-css-order": "^2.1.2",
"prettier-plugin-svelte": "^3.3.3", "prettier-plugin-svelte": "^3.3.3",
@ -1066,6 +1067,15 @@
"postcss": "^8.0.9" "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": { "node_modules/debug": {
"version": "4.4.0", "version": "4.4.0",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",

3
frontend/package.json
View file

@ -1,9 +1,10 @@
{ {
"name": "svelte-hello", "name": "ytlean",
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"@sveltejs/vite-plugin-svelte": "^5.0.3", "@sveltejs/vite-plugin-svelte": "^5.0.3",
"@tailwindcss/vite": "^4.1.3", "@tailwindcss/vite": "^4.1.3",
"daisyui": "^5.0.18",
"prettier": "^3.5.3", "prettier": "^3.5.3",
"prettier-plugin-css-order": "^2.1.2", "prettier-plugin-css-order": "^2.1.2",
"prettier-plugin-svelte": "^3.3.3", "prettier-plugin-svelte": "^3.3.3",

40
frontend/src/App.svelte
View file

@ -11,7 +11,9 @@
videoId = ""; videoId = "";
try { 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"); if (!res.ok) throw new Error("Channel not found or API error");
const data = await res.json(); const data = await res.json();
videoId = data.id; videoId = data.id;
@ -28,37 +30,43 @@
} }
</script> </script>
<main class="min-h-screen bg-gray-100 flex flex-col items-center justify-center p-6"> <main
<h1 class="text-4xl font-extrabold mb-6">YouTube Latest Video Finder</h1> 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 <input
type="text" type="text"
bind:value={channelName} bind:value={channelName}
placeholder="Enter channel name" placeholder="Enter channel name"
class="px-4 py-2 border border-gray-300 rounded-md w-72" class="input"
/> />
<button <button type="submit" disabled={loading} class="btn btn-primary">
type="submit" {#if loading}
disabled={loading} <span class="loading loading-spinner"></span> Loading...
class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50" {:else}
> Get Latest Video
{loading ? "Loading..." : "Get Latest Video"} {/if}
</button> </button>
</form> </form>
{#if error} {#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}
{#if videoId} {#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 <iframe
title="video" title="video"
width="560"
height="315"
src={`https://www.youtube.com/embed/${videoId}?rel=0`} src={`https://www.youtube.com/embed/${videoId}?rel=0`}
class="rounded-lg shadow-lg" class="h-full w-full"
allowfullscreen
></iframe> ></iframe>
</div> </div>
{/if} {/if}

6
frontend/src/styles.css Normal file
View file

@ -0,0 +1,6 @@
@import "tailwindcss";
@plugin "daisyui" {
theme:
light --default,
dark --prefersdark;
}

8
frontend/vite.config.js
View file

@ -1,11 +1,7 @@
import tailwindcss from "@tailwindcss/vite" import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vite"; import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte"; import { svelte } from "@sveltejs/vite-plugin-svelte";
export default defineConfig({ export default defineConfig({
plugins: [ plugins: [svelte(), tailwindcss()],
svelte(),
tailwindcss()
],
}); });