mirror of
https://github.com/Nezumi-2711/onedrive-vercel-index.git
synced 2026-09-22 05:32:01 +00:00
colored toast and other minor tweaks
This commit is contained in:
spencerwooo
@@ -9,13 +9,13 @@ const Breadcrumb: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =>
|
||||
if (Array.isArray(path)) {
|
||||
return (
|
||||
<div className="pb-4 text-sm text-gray-600 dark:text-gray-300 flex overflow-x-scroll no-scrollbar">
|
||||
<div className="p-1 hover:text-black dark:hover:text-gray-400 transition-all duration-75 flex-shrink-0">
|
||||
<div className="p-1 hover:opacity-80 transition-all duration-75 flex-shrink-0">
|
||||
<Link href="/">🚩 Home</Link>
|
||||
</div>
|
||||
{path.map((q: string, i: number) => (
|
||||
<div key={i} className="flex items-center flex-shrink-0">
|
||||
<div>/</div>
|
||||
<div className="p-1 hover:text-black dark:hover:text-gray-400 transition-all duration-75">
|
||||
<div className="p-1 hover:opacity-80 transition-all duration-75">
|
||||
<Link
|
||||
href={`/${path
|
||||
.slice(0, i + 1)
|
||||
@@ -33,7 +33,7 @@ const Breadcrumb: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =>
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="pb-4 text-sm text-gray-600 dark:text-gray-300 hover:text-black dark:hover:text-gray-400 transition-all duration-75">
|
||||
<div className="pb-4 text-sm text-gray-600 dark:text-gray-300 hover:opacity-80 transition-all duration-75">
|
||||
<div className="p-1">
|
||||
<Link href="/">🚩 Home</Link>
|
||||
</div>
|
||||
|
||||
@@ -12,7 +12,14 @@ const DownloadBtn: FunctionComponent<{ downloadUrl: string }> = ({ downloadUrl }
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap space-x-2 justify-center">
|
||||
<Toaster />
|
||||
<Toaster
|
||||
toastOptions={{
|
||||
style: {
|
||||
background: '#316C23',
|
||||
color: '#ffffff',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<a
|
||||
className="flex-shrink-0 w-36 flex space-x-4 items-center justify-center bg-blue-500 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-600 mb-2"
|
||||
href={downloadUrl}
|
||||
|
||||
@@ -170,7 +170,15 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
|
||||
<div className="hidden md:block font-bold">Size</div>
|
||||
<div className="hidden md:block font-bold">Actions</div>
|
||||
</div>
|
||||
<Toaster />
|
||||
|
||||
<Toaster
|
||||
toastOptions={{
|
||||
style: {
|
||||
background: '#316C23',
|
||||
color: '#ffffff',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
{imagesInFolder.length !== 0 && (
|
||||
<ReactViewer
|
||||
@@ -210,7 +218,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
|
||||
)}
|
||||
|
||||
{children.map((c: any) => (
|
||||
<div className="grid grid-cols-12 hover:bg-gray-100 dark:hover:bg-gray-800" key={c.id}>
|
||||
<div className="grid grid-cols-12 hover:bg-gray-100 dark:hover:bg-gray-850" key={c.id}>
|
||||
<div
|
||||
className="col-span-11"
|
||||
onClick={e => {
|
||||
@@ -227,33 +235,33 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
|
||||
<FileListItem fileContent={c} />
|
||||
</div>
|
||||
{c.folder ? (
|
||||
<div className="hidden md:block col-span-1 space-x-2 p-3 text-gray-700 dark:text-gray-500">
|
||||
<div className="hidden md:flex p-1 text-gray-700 dark:text-gray-400">
|
||||
<span
|
||||
title="Copy folder permalink"
|
||||
className="cursor-pointer hover:opacity-80"
|
||||
className="cursor-pointer p-2 rounded hover:bg-gray-300 dark:hover:bg-gray-600"
|
||||
onClick={() => {
|
||||
clipboard.copy(`${getBaseUrl()}${path === '/' ? '' : path}/${encodeURIComponent(c.name)}`)
|
||||
toast.success('Copied folder permanent link to clipboard.')
|
||||
toast.success('Copied folder permalink.')
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon icon={['far', 'copy']} />
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="hidden md:block col-span-1 space-x-2 p-3 text-gray-700 dark:text-gray-500">
|
||||
<div className="hidden md:flex p-1 text-gray-700 dark:text-gray-400">
|
||||
<span
|
||||
title="Copy raw file permalink"
|
||||
className="cursor-pointer hover:opacity-80"
|
||||
className="cursor-pointer p-2 rounded hover:bg-gray-300 dark:hover:bg-gray-600"
|
||||
onClick={() => {
|
||||
clipboard.copy(`${getBaseUrl()}/api?path=${path === '/' ? '' : path}/${c.name}&raw=true`)
|
||||
toast.success('Copied permanent raw file link to clipboard.')
|
||||
toast.success('Copied raw file permalink.')
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon icon={['far', 'copy']} />
|
||||
</span>
|
||||
<a
|
||||
title="Download file"
|
||||
className="cursor-pointer hover:opacity-80"
|
||||
className="cursor-pointer p-2 rounded hover:bg-gray-300 dark:hover:bg-gray-600"
|
||||
href={c['@microsoft.graph.downloadUrl']}
|
||||
>
|
||||
<FontAwesomeIcon icon={['far', 'arrow-alt-circle-down']} />
|
||||
|
||||
@@ -1,17 +1,20 @@
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import Link from 'next/link'
|
||||
|
||||
import siteConfig from '../config/site.json'
|
||||
|
||||
const Navbar = () => {
|
||||
return (
|
||||
<div className="text-left bg-white dark:bg-gray-900 p-3 sticky top-0 bg-opacity-80 backdrop-blur-md shadow-sm z-[100]">
|
||||
<div className="text-left p-1 bg-white dark:bg-gray-900 sticky top-0 bg-opacity-80 backdrop-blur-md shadow-sm z-[100]">
|
||||
<div className="max-w-4xl w-full mx-auto flex items-center justify-between">
|
||||
<h1 className="font-bold text-xl dark:text-white">{siteConfig.title}</h1>
|
||||
<h1 className="font-bold text-xl p-2 rounded dark:text-white hover:opacity-80">
|
||||
<Link href="/">{siteConfig.title}</Link>
|
||||
</h1>
|
||||
<a
|
||||
href="https://github.com/spencerwooo/onedrive-vercel-index"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="dark:text-white"
|
||||
className="p-2 rounded dark:text-white hover:opacity-80"
|
||||
>
|
||||
<FontAwesomeIcon icon={['fab', 'github']} size="lg" />
|
||||
</a>
|
||||
|
||||
@@ -28,7 +28,14 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap space-x-2 justify-center mt-4">
|
||||
<Toaster />
|
||||
<Toaster
|
||||
toastOptions={{
|
||||
style: {
|
||||
background: '#316C23',
|
||||
color: '#ffffff',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<a
|
||||
className="flex-shrink-0 w-36 flex space-x-4 items-center justify-center bg-blue-500 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-600 mb-2"
|
||||
href={file['@microsoft.graph.downloadUrl']}
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
{
|
||||
"title": "Spencer's OneDrive Index",
|
||||
"footer": "Powered by <a href=\"https://github.com/spencerwooo/onedrive-vercel-index\" target=\"_blank\" rel=\"noopener noreferrer\">onedrive-vercel-index</a>. Made with ❤ by SpencerWoo."
|
||||
"footer": "Powered by <a class=\"hover:underline\" href=\"https://github.com/spencerwooo/onedrive-vercel-index\" target=\"_blank\" rel=\"noopener noreferrer\">onedrive-vercel-index</a>. Made with ❤ by SpencerWoo."
|
||||
}
|
||||
|
||||
+6
-1
@@ -4,7 +4,7 @@ const colors = require('tailwindcss/colors')
|
||||
module.exports = {
|
||||
mode: 'jit',
|
||||
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
|
||||
darkMode: 'media', // or 'media' or 'class'
|
||||
darkMode: 'media',
|
||||
theme: {
|
||||
colors: {
|
||||
transparent: 'transparent',
|
||||
@@ -23,6 +23,11 @@ module.exports = {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Inter', '"Noto Sans SC"', ...defaultTheme.fontFamily.sans]
|
||||
},
|
||||
colors: {
|
||||
gray: {
|
||||
850: '#2E2E34'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
+1
-1
@@ -22,7 +22,7 @@ const fetcher = (url: string) => axios.get(url).then(res => res.data)
|
||||
*/
|
||||
export const useStaleSWR = (dataKey: Key) => {
|
||||
const revalidationOptions = {
|
||||
revalidateOnMount: !cache.has(dataKey), //here we refer to the SWR cache
|
||||
revalidateOnMount: !cache.has(dataKey),
|
||||
revalidateOnFocus: false,
|
||||
revalidateOnReconnect: false,
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user