Feat: added placeholder components

src/lib/assets/styles/tailwind-output.css

@@ -1848,6 +1848,41 @@ html {
 .btn-secondary:focus-visible {
   outline: 2px solid hsl(var(--s));
 }
+.btn-accent:hover,
+    .btn-accent.btn-active {
+  --tw-border-opacity: 1;
+  border-color: hsl(var(--af, var(--a)) / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--af, var(--a)) / var(--tw-bg-opacity));
+}
+.btn-info:hover,
+    .btn-info.btn-active {
+  --tw-border-opacity: 1;
+  border-color: hsl(var(--in) / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--in) / var(--tw-bg-opacity));
+}
+.btn-success:hover,
+    .btn-success.btn-active {
+  --tw-border-opacity: 1;
+  border-color: hsl(var(--su) / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--su) / var(--tw-bg-opacity));
+}
+.btn-warning:hover,
+    .btn-warning.btn-active {
+  --tw-border-opacity: 1;
+  border-color: hsl(var(--wa) / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--wa) / var(--tw-bg-opacity));
+}
+.btn-error:hover,
+    .btn-error.btn-active {
+  --tw-border-opacity: 1;
+  border-color: hsl(var(--er) / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--er) / var(--tw-bg-opacity));
+}
 .btn.glass:hover,
     .btn.glass.btn-active {
   --glass-opacity: 25%;
@@ -1871,6 +1906,12 @@ html {
 .btn-ghost:focus-visible {
   outline: 2px solid currentColor;
 }
+.btn-link:hover,
+    .btn-link.btn-active {
+  border-color: transparent;
+  background-color: transparent;
+  text-decoration-line: underline;
+}
 .btn-outline {
   border-color: currentColor;
   background-color: transparent;
@@ -2623,10 +2664,20 @@ html {
 :where(.table *:last-child) :where(*:last-child) :where(th, td):last-child {
   border-bottom-right-radius: 0.5rem;
 }
+.textarea-bordered {
+  --tw-border-opacity: 0.2;
+}
 .textarea:focus {
   outline: 2px solid hsla(var(--bc) / 0.2);
   outline-offset: 2px;
 }
+.textarea-primary {
+  --tw-border-opacity: 1;
+  border-color: hsl(var(--p) / var(--tw-border-opacity));
+}
+.textarea-primary:focus {
+  outline: 2px solid hsl(var(--p));
+}
 .textarea-info {
   --tw-border-opacity: 1;
   border-color: hsl(var(--in) / var(--tw-border-opacity));
@@ -2747,6 +2798,28 @@ html {
 .rounded-box {
   border-radius: var(--rounded-box, 1rem);
 }
+.glass,
+  .glass:hover,
+  .glass.btn-active {
+  border: none;
+  -webkit-backdrop-filter: blur(var(--glass-blur, 40px));
+          backdrop-filter: blur(var(--glass-blur, 40px));
+  background-color: transparent;
+  background-image: linear-gradient(
+        135deg,
+        rgb(255 255 255 / var(--glass-opacity, 30%)) 0%,
+        rgb(0 0 0 / 0%) 100%
+      ),
+      linear-gradient(
+        var(--glass-reflex-degree, 100deg),
+        rgb(255 255 255 / var(--glass-reflex-opacity, 10%)) 25%,
+        rgb(0 0 0 / 0%) 25%
+      );
+  box-shadow: 0 0 0 1px rgb(255 255 255 / var(--glass-border-opacity, 10%))
+        inset,
+      0 0 0 2px rgb(0 0 0 / 5%);
+  text-shadow: 0 1px rgb(0 0 0 / var(--glass-text-shadow-opacity, 5%));
+}
 .badge-sm {
   height: 1rem;
   font-size: 0.75rem;
@@ -3138,6 +3211,40 @@ html {
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+@keyframes bounce {
+
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8,0,1,1);
+  }
+
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0,0,0.2,1);
+  }
+}
+.animate-bounce {
+  animation: bounce 1s infinite;
+}
+@keyframes pulse {
+
+  50% {
+    opacity: .5;
+  }
+}
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+@keyframes ping {
+
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+.animate-ping {
+  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
 .cursor-pointer {
   cursor: pointer;
 }
@@ -3159,6 +3266,9 @@ html {
 .items-center {
   align-items: center;
 }
+.justify-start {
+  justify-content: flex-start;
+}
 .justify-end {
   justify-content: flex-end;
 }

src/lib/components/Browse/ChannelSearch.svelte

@@ -0,0 +1,22 @@
+<script>
+	import IconCreate from '$lib/assets/icons/IconCreate.svelte'
+	import IconSearch from '$lib/assets/icons/IconSearch.svelte'
+</script>
+
+<div class="flex gap-4 py-5 pl-5">
+	<div class="form-control">
+		<div class="input-group">
+			<input
+				type="text"
+				placeholder="Search channels"
+				class="input input-bordered input-primary w-72" />
+			<button class="btn btn-square">
+				<IconSearch />
+			</button>
+		</div>
+	</div>
+
+	<button class="btn btn-wide btn-primary gap-2">
+		<IconCreate />
+		Create a channel</button>
+</div>

src/lib/components/Browse/ChannelList.svelte → src/lib/components/Browse/ChannelTable.svelte

@@ -1,28 +1,8 @@
 <script>
-	import IconCreate from '$lib/assets/icons/IconCreate.svelte'
-	import IconSearch from '$lib/assets/icons/IconSearch.svelte'
 	import IconLock from '$lib/assets/icons/IconLock.svelte'
 	import IconViewers from '$lib/assets/icons/IconViewers.svelte'
 </script>
 
-<div class="flex gap-4 py-5 pl-5">
-	<div class="form-control">
-		<div class="input-group">
-			<input
-				type="text"
-				placeholder="Search channels"
-				class="input input-bordered input-primary w-72" />
-			<button class="btn btn-square">
-				<IconSearch />
-			</button>
-		</div>
-	</div>
-
-	<button class="btn btn-wide btn-primary gap-2">
-		<IconCreate />
-		Create a channel</button>
-</div>
-
 <div class="overflow-x-auto w-full">
 	<table class="table table-zebra w-full">
 		<!-- head -->

src/routes/+layout.svelte

@@ -30,6 +30,8 @@
 	import IconSocialGitHub from '$lib/assets/icons/social/IconSocialGitHub.svelte'
 	import IconDrawerAdmin from '$lib/assets/icons/drawer/IconDrawerAdmin.svelte'
 	import LoginPrompt from '$lib/components/MainDrawer/LoginPrompt.svelte'
+	import Community from '$lib/components/MainDrawer/Community.svelte'
+	import Messages from '$lib/components/MainDrawer/Messages.svelte'
 	NProgress.configure({
 		minimum: 0.75,
 		showSpinner: false,
@@ -66,7 +68,6 @@
 		rel="stylesheet" />
 </svelte:head>
 
-<!-- {#if $isAuthenticated} -->
 <div class="drawer drawer-mobile">
 	<input id="my-drawer-2" bind:this={nav_drawer} type="checkbox" class="drawer-toggle" />
 	<div class="drawer-content bg-base-200">
@@ -79,6 +80,8 @@
 	<div class="drawer-side">
 		<label for="my-drawer-2" class="drawer-overlay" />
 		<div class="menu p-4 w-80 bg-base-100 text-base-content flex flex-col">
+			<!-- <Community /> -->
+			<!-- <Messages /> -->
 			<ul>
 				<div class="navbar">
 					<a href="/browse" class="btn btn-ghost normal-case text-xl">Mage</a>
@@ -123,14 +126,13 @@
 							Admin
 						</a>
 					</li>
-				{:else}
-					<li>
-						<a href="/browse">
-							<IconDrawerHome />
-							Browse
-						</a>
-					</li>
 				{/if}
+				<li>
+					<a href="/browse">
+						<IconDrawerHome />
+						Browse
+					</a>
+				</li>
 				<li>
 					<a href="">
 						<IconDrawerCommunity />
@@ -244,5 +246,3 @@
 		</div>
 	</div>
 </div>
-
-<!-- {/if} -->

src/routes/browse/+page.svelte

@@ -1,6 +1,6 @@
 <script>
 	import Carousel from '$lib/components/Browse/Carousel.svelte'
-	import ChannelList from '$lib/components/Browse/ChannelList.svelte'
+	import ChannelList from '$lib/components/Browse/ChannelTable.svelte'
 </script>
 
 <Carousel />

src/routes/contact/+page.svelte

@@ -52,8 +52,8 @@
 								id="full_name"
 								name="full_name"
 								type="text"
-								class="focus:outline-none focus:border focus:border-indigo-700 font-normal w-64 h-10 flex items-center pl-3 text-sm border-gray-300 rounded border"
-								placeholder="Full Name"
+								class="input input-bordered input-primary w-64 h-10 flex"
+								placeholder="Elizabeth Caledonia"
 								aria-label="enter your full name input" />
 						</div>
 					</div>
@@ -66,7 +66,7 @@
 								id="email"
 								name="email"
 								type="email"
-								class="focus:outline-none focus:border focus:border-indigo-700 font-normal w-64 h-10 flex items-center pl-3 text-sm border-gray-300 rounded border"
+								class="input input-bordered input-primary w-64 h-10 flex"
 								placeholder="example@email.com"
 								aria-label="enter your email input" />
 						</div>
@@ -82,7 +82,7 @@
 								id="subject"
 								name="subject"
 								type="tel"
-								class="focus:outline-none focus:border focus:border-indigo-700 font-normal w-64 h-10 flex items-center pl-3 text-sm border-gray-300 rounded border"
+								class="input input-bordered input-primary w-64 h-10 flex"
 								placeholder="Subject"
 								aria-label="enter a subject" />
 						</div>
@@ -94,7 +94,7 @@
 						<textarea
 							placeholder=""
 							name="message"
-							class="border-gray-300 border mb-4 rounded py-2 text-sm outline-none resize-none px-3 focus:border focus:border-indigo-700"
+							class="textarea textarea-bordered textarea-primary flex mb-4 py-2 px-3"
 							rows="8"
 							id="message"
 							aria-label="enter your message input" />

src/routes/profile/[customUsername]/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import IconLink from '$lib/assets/icons/IconLink.svelte'
 	import IconMore from '$lib/assets/icons/IconMore.svelte'
-	import ChannelList from '$lib/components/Browse/ChannelList.svelte'
+	import ChannelList from '$lib/components/Browse/ChannelTable.svelte'
 	import FollowList from '$lib/components/Profile/FollowList.svelte'
 
 	let tabs = ['Stats', 'Channels', 'Follows']

src/routes/settings/+page.svelte

@@ -22,7 +22,7 @@
 						name="email"
 						type="email"
 						placeholder="nerf-this@gamer.com"
-						class="input input-bordered" />
+						class="input input-bordered input-primary w-72" />
 					<button class="btn btn-primary">Save</button>
 				</label>
 			</div>