カテゴリ

ファイルビューア

ドキュメントとファイルを表示するためのコンポーネント

ファイルビューアコンポーネント

マテリアルデザインの原則に基づいて設計されたレスポンシブファイルビューアコンポーネントで、ダークモードのサポートとレスポンシブエフェクトを備えています。

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-lg mx-auto">
    <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">File Viewer</h2>
    <div class="space-y-4">
        <div class="border border-gray-300 dark:border-gray-700 rounded-lg p-4 flex items-center">
            <img src="https://picsum.photos/50/50" alt="File Thumbnail" class="rounded-lg mr-3">
            <div class="flex-grow">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">Document Title</h3>
                <p class="text-gray-600 dark:text-gray-400">File Type: PDF</p>
                <p class="text-gray-600 dark:text-gray-400">Size: 1.2 MB</p>
            </div>
        </div>
        <div class="border border-gray-300 dark:border-gray-700 rounded-lg p-4 flex items-center">
            <img src="https://picsum.photos/50/50/?random=1" alt="File Thumbnail" class="rounded-lg mr-3">
            <div class="flex-grow">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">Image Title</h3>
                <p class="text-gray-600 dark:text-gray-400">File Type: JPEG</p>
                <p class="text-gray-600 dark:text-gray-400">Size: 3.4 MB</p>
            </div>
        </div>
        <div class="border border-gray-300 dark:border-gray-700 rounded-lg p-4 flex items-center">
            <img src="https://picsum.photos/50/50/?random=2" alt="File Thumbnail" class="rounded-lg mr-3">
            <div class="flex-grow">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">Video Title</h3>
                <p class="text-gray-600 dark:text-gray-400">File Type: MP4</p>
                <p class="text-gray-600 dark:text-gray-400">Size: 20 MB</p>
            </div>
        </div>
    </div>
</div>

<!-- Dark Mode CSS -->
<style>
    /* Example dark mode CSS */
    body {
        background-color: #121212;
        color: #ffffff;
    }
</style>

ファイルビューアコンポーネント1

Tailwind CSSを使用して設計されたミニマリストのファイルビューアコンポーネントで、レスポンシブエフェクトとダークテーマのサポートが特徴です。画像やユーザーアバターのプレースホルダーなど、クリーンなレイアウトでファイルを表示します。

プレビューを開く

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <div class="p-6">
        <div class="flex items-center mb-4">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div class="ml-3">
                <p class="text-gray-800 dark:text-white font-semibold">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">Last Updated: 2023-10-01</p>
            </div>
        </div>
        <div class="flex justify-center">
            <img class="w-full h-48 object-cover rounded-lg" src="https://picsum.photos/seed/picsum/400/250" alt="Placeholder Image">
        </div>
        <div class="mt-4">
            <p class="text-gray-700 dark:text-gray-300">File Name: <span class="font-semibold">example-file.pdf</span></p>
            <p class="text-gray-700 dark:text-gray-300">File Size: <span class="font-semibold">1.2 MB</span></p>
            <p class="text-gray-700 dark:text-gray-300">Uploaded On: <span class="font-semibold">2023-09-25</span></p>
        </div>
    </div>
    <div class="bg-gray-200 dark:bg-gray-700 p-4 text-center">
        <button class="bg-blue-500 text-white rounded-md py-2 px-4 transition duration-200 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">Download</button>
    </div>
</div>