new-manga/src/pages/custom.astro
2025-03-23 13:52:48 -07:00

44 lines
No EOL
1.6 KiB
Text

---
import Layout from '../layouts/Layout.astro';
import SlugInput from '../components/SlugInput.astro';
const title = "ComicK - Custom RSS Feed";
const description = "Create a custom RSS feed for your favorite comics";
---
<Layout title={title} description={description}>
<div class="container mx-auto px-4 py-8">
<!-- Add back button -->
<a
href="/en/sfw/all"
class="inline-flex items-center gap-2 mb-6 px-4 py-2 bg-secondary hover:bg-hover rounded-md transition-colors font-medium"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M19 12H5M12 19l-7-7 7-7"/>
</svg>
Back to Comics
</a>
<main class="mx-auto px-3 sm:px-4 lg:px-8 max-w-[800px] py-4 sm:py-8">
<h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-center mb-4 sm:mb-8">Custom RSS Feed</h1>
<div class="bg-secondary/50 p-3 sm:p-6 rounded-lg shadow-lg">
<SlugInput />
</div>
<div class="mt-4 sm:mt-8 text-center text-primary/60 text-sm sm:text-base">
<p>Search for your favorite comics using the search box above, or add their slugs manually.</p>
<p class="mt-2">Manual example: For <a href="https://comick.io/comic/01-one-piece" class="text-accent hover:underline">https://comick.io/comic/01-one-piece</a>, the slug is "01-one-piece"</p>
</div>
</main>
</div>
</Layout>