mahdium/TBW
1
0
Fork 0
mirror of https://github.com/mmahdium/TBW.git synced 2025-11-04 04:28:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

Format codebase

Browse Source
This commit is contained in:
Mohammad Mahdi
2025-10-21 22:10:34 +03:30
parent 398b3ae53a
commit 8598ed76db
7 changed files with 37 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/MovieCard.vue
View File

@@ -20,20 +20,13 @@ const alreadyAdded = computed(() =>
<template>
<div
class="card relative w-full h-full overflow-hidden
bg-white/70 backdrop-blur-md border border-gray-200/60
shadow-md hover:shadow-xl transition-all duration-300"
class="card relative w-full h-full overflow-hidden bg-white/70 backdrop-blur-md border border-gray-200/60 shadow-md hover:shadow-xl transition-all duration-300"
v-motion-fade-visible-once
>
<!-- Poster -->
<router-link :to="{ name: 'details', params: { id: props.movie.imdbID } }">
<figure
class="overflow-hidden flex items-center justify-center aspect-[2/3] bg-gray-50"
>
<span
v-if="props.loading"
class="loading loading-ring loading-lg text-primary"
></span>
<figure class="overflow-hidden flex items-center justify-center aspect-[2/3] bg-gray-50">
<span v-if="props.loading" class="loading loading-ring loading-lg text-primary"></span>
<div v-else-if="imageLoadFailed" class="flex items-center justify-center">
<svg
@@ -72,9 +65,7 @@ const alreadyAdded = computed(() =>
<div class="card-body p-4 flex flex-col">
<router-link :to="{ name: 'details', params: { id: props.movie.imdbID } }">
<h2
class="card-title text-base font-semibold
bg-gradient-to-r from-gray-700 to-gray-500
bg-clip-text text-transparent"
class="card-title text-base font-semibold bg-gradient-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
>
{{ props.movie.Title }}
</h2>
@@ -84,22 +75,14 @@ const alreadyAdded = computed(() =>
<div class="card-actions justify-end mt-auto">
<button
v-if="!alreadyAdded"
class="btn btn-sm px-4
bg-gradient-to-r from-gray-100 to-gray-200
border border-gray-300 text-gray-700
hover:from-gray-200 hover:to-gray-300 hover:text-gray-900
transition"
class="btn btn-sm px-4 bg-gradient-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300 hover:text-gray-900 transition"
@click="store.addMovie(props.movie)"
>
Add
</button>
<button
v-else
class="btn btn-sm px-4
bg-gradient-to-r from-red-50 to-red-100
border border-red-200 text-red-600
hover:from-red-100 hover:to-red-200 hover:text-red-700
transition"
class="btn btn-sm px-4 bg-gradient-to-r from-red-50 to-red-100 border border-red-200 text-red-600 hover:from-red-100 hover:to-red-200 hover:text-red-700 transition"
@click="store.removeMovie(props.movie.imdbID)"
>
Remove

41
src/components/NavBar.vue
View File

@@ -1,19 +1,12 @@
<template>
<div
class="navbar sticky top-0 z-20
bg-white/70 backdrop-blur-md border-b border-gray-200/60
shadow-sm transition"
class="navbar sticky top-0 z-20 bg-white/70 backdrop-blur-md border-b border-gray-200/60 shadow-sm transition"
>
<!-- Left -->
<div class="navbar-start">
<!-- Mobile dropdown -->
<div class="dropdown">
<div
tabindex="0"
role="button"
class="btn btn-ghost lg:hidden"
aria-label="Menu"
>
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden" aria-label="Menu">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-gray-600"
@@ -31,20 +24,19 @@
</div>
<ul
tabindex="-1"
class="menu menu-sm dropdown-content
mt-3 w-52 p-2 rounded-lg shadow-md
bg-white/80 backdrop-blur-md border border-gray-200/60"
class="menu menu-sm dropdown-content mt-3 w-52 p-2 rounded-lg shadow-md bg-white/80 backdrop-blur-md border border-gray-200/60"
>
<li><RouterLink class="text-gray-700 hover:text-gray-900" to="/">Home</RouterLink></li>
<li><RouterLink class="text-gray-700 hover:text-gray-900" to="/list">Library</RouterLink></li>
<li>
<RouterLink class="text-gray-700 hover:text-gray-900" to="/list">Library</RouterLink>
</li>
<li><RouterLink class="text-gray-700 hover:text-gray-900" to="/add">Add</RouterLink></li>
</ul>
</div>
<!-- Logo -->
<RouterLink
class="btn btn-ghost normal-case text-2xl font-bold
bg-gradient-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
class="btn btn-ghost normal-case text-2xl font-bold bg-gradient-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
to="/"
>
To Vue
@@ -54,17 +46,26 @@
<!-- Center (desktop menu) -->
<div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal px-1 space-x-4">
<li><RouterLink class="text-gray-700 hover:text-gray-900 transition" to="/">Home</RouterLink></li>
<li><RouterLink class="text-gray-700 hover:text-gray-900 transition" to="/list">Library</RouterLink></li>
<li><RouterLink class="text-gray-700 hover:text-gray-900 transition" to="/add">Add</RouterLink></li>
<li>
<RouterLink class="text-gray-700 hover:text-gray-900 transition" to="/">Home</RouterLink>
</li>
<li>
<RouterLink class="text-gray-700 hover:text-gray-900 transition" to="/list"
>Library</RouterLink
>
</li>
<li>
<RouterLink class="text-gray-700 hover:text-gray-900 transition" to="/add"
>Add</RouterLink
>
</li>
</ul>
</div>
<!-- Right -->
<div class="navbar-end">
<RouterLink
class="btn px-5 bg-gradient-to-r from-gray-100 to-gray-200
border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300"
class="btn px-5 bg-gradient-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300"
to="/list"
>
Go to library

5
src/components/SearchBar.vue
View File

@@ -14,10 +14,7 @@ function onSubmit() {
<template>
<form @submit.prevent="onSubmit" class="flex justify-center mb-8">
<div
class="flex items-center w-full max-w-md
bg-white/70 backdrop-blur-md border border-gray-200/60
shadow-sm hover:shadow-md transition
rounded-lg overflow-hidden"
class="flex items-center w-full max-w-md bg-white/70 backdrop-blur-md border border-gray-200/60 shadow-sm hover:shadow-md transition rounded-lg overflow-hidden"
>
<!-- Icon -->
<span class="pl-3 text-gray-400">

2
src/router/index.ts
View File

@@ -32,7 +32,7 @@ const routes: RouteRecordRaw[] = [
path: '/watch/:name/:id',
name: 'watch',
component: WatchView,
}
},
]
const router = createRouter({

7
src/views/AddView.vue
View File

@@ -105,8 +105,7 @@ watch(searchQuery, () => {
<div class="container mx-auto px-4 py-12" v-motion-fade-visible-once>
<!-- Title -->
<h1
class="text-4xl font-extrabold text-center mb-10
bg-gradient-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
class="text-4xl font-extrabold text-center mb-10 bg-gradient-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
>
Add a Movie
</h1>
@@ -133,8 +132,7 @@ watch(searchQuery, () => {
<!-- Empty state -->
<p
v-else
class="text-center text-gray-500 mt-16
bg-gray-50/60 border border-gray-200 rounded-lg py-12"
class="text-center text-gray-500 mt-16 bg-gray-50/60 border border-gray-200 rounded-lg py-12"
>
Search for a movie to add it to your list
</p>
@@ -145,4 +143,3 @@ watch(searchQuery, () => {
</div>
</div>
</template>

16
src/views/HomeView.vue
View File

@@ -5,9 +5,7 @@
<div class="flex flex-col items-center justify-center text-center">
<h1 class="text-5xl font-bold mb-8 leading-tight">
Welcome to <br />
<span class="text-6xl font-extrabold gradient-text">
To Be Watched
</span>
<span class="text-6xl font-extrabold gradient-text"> To Be Watched </span>
</h1>
<p class="text-lg text-gray-600 max-w-2xl mb-12">
@@ -16,11 +14,7 @@
<RouterLink
to="/add"
class="btn px-8 py-3 text-lg font-medium
bg-gradient-to-r from-gray-100 to-gray-200
border border-gray-300 text-gray-700
hover:from-gray-200 hover:to-gray-300 hover:text-gray-900
transition"
class="btn px-8 py-3 text-lg font-medium bg-gradient-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300 hover:text-gray-900 transition"
>
Get Started
</RouterLink>
@@ -32,9 +26,9 @@
.gradient-text {
background: linear-gradient(
90deg,
#6b7280 0%, /* gray-500 */
#818cf8 50%, /* indigo-400 */
#22d3ee 100% /* cyan-400 */
#6b7280 0%,
/* gray-500 */ #818cf8 50%,
/* indigo-400 */ #22d3ee 100% /* cyan-400 */
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

6
src/views/WatchView.vue
View File

@@ -1,15 +1,11 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ref } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const movieId = ref(route.params.id as string)
const movieName = ref(route.params.name as string)
const isLoaded = ref(false)
onMounted(() => {
// You could add extra logic here if needed
})
</script>
<template>