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" />
<title>Document</title>
<style>
@import "tailwindcss";
</style>
<link rel="stylesheet" href="./src/styles.css" />
</head>
<body>
<div id="app"></div>

10
frontend/package-lock.json generated
View file

@ -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",

3
frontend/package.json
View file

@ -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",

40
frontend/src/App.svelte
View file

@ -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}

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 { svelte } from "@sveltejs/vite-plugin-svelte";
export default defineConfig({
plugins: [
svelte(),
tailwindcss()
],
plugins: [svelte(), tailwindcss()],
});