forked from fosslight/fosslight
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
Construct the template for list pages (#16)
- Loading branch information
Showing
10 changed files
with
243 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,38 @@ | ||
| import ListFilters from '@/components/list-filters'; | ||
| import ListTable from '@/components/list-table'; | ||
| import ExcelIcon from '@/public/images/excel.png'; | ||
| import Image from 'next/image'; | ||
|
|
||
| export default function OSSList() { | ||
| return <div>Database > OSS List</div>; | ||
| return ( | ||
| <> | ||
| {/* Breadcrumb */} | ||
| <h2 className="pb-2 text-xl font-black"> | ||
| Database | ||
| <i className="mx-2 text-sm fa-solid fa-angle-right"></i> | ||
| OSS List | ||
| </h2> | ||
|
|
||
| {/* Description */} | ||
| <h3 className="pb-8"> | ||
| List of OSS(= Open Source Software) information registered in the database. | ||
| </h3> | ||
|
|
||
| {/* Filters */} | ||
| <ListFilters /> | ||
|
|
||
| {/* Button(s) */} | ||
| <div className="flex justify-end gap-x-2 mt-8 mb-4"> | ||
| <button className="flex items-center gap-x-1.5 px-2 py-0.5 border border-gray rounded"> | ||
| <div className="relative w-4 h-4"> | ||
| <Image src={ExcelIcon} fill sizes="32px" alt="export" /> | ||
| </div> | ||
| Export | ||
| </button> | ||
| </div> | ||
|
|
||
| {/* Table */} | ||
| <ListTable /> | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| export default function ListFilters() { | ||
| return ( | ||
| <form className="w-[calc(100%-4px)] p-4 border border-darkgray rounded-lg shadow-[2px_2px_4px_0_rgba(0,0,0,0.2)]"> | ||
| <div className="grid grid-cols-1 gap-x-8 gap-y-2 text-sm lg:grid-cols-2"> | ||
| <div className="flex items-start gap-x-4"> | ||
| <div className="flex-shrink-0 w-20">Text</div> | ||
| <div className="flex-1"> | ||
| <div className="flex gap-x-2"> | ||
| <input className="flex-1 w-0 px-2 py-1 border border-darkgray outline-none" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="flex items-start gap-x-4"> | ||
| <div className="flex-shrink-0 w-20">Text + Check</div> | ||
| <div className="flex-1"> | ||
| <div className="flex gap-x-2"> | ||
| <input className="flex-1 w-0 px-2 py-1 border border-darkgray outline-none" /> | ||
| <label className="flex items-center gap-x-1.5"> | ||
| <input className="w-4 h-4" type="checkbox" /> | ||
| Exact | ||
| </label> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="flex items-start gap-x-4"> | ||
| <div className="flex-shrink-0 w-20">Select</div> | ||
| <div className="flex-1"> | ||
| <select className="w-full px-2 py-1 border border-darkgray outline-none"> | ||
| <option>Option 1</option> | ||
| <option>Option 2</option> | ||
| <option>Option 3</option> | ||
| </select> | ||
| </div> | ||
| </div> | ||
| <div className="flex items-start gap-x-4"> | ||
| <div className="flex-shrink-0 w-20">Check</div> | ||
| <div className="flex-1"> | ||
| <div className="flex flex-wrap gap-x-4 gap-y-1"> | ||
| <label className="flex items-center gap-x-1.5"> | ||
| <input className="w-4 h-4" type="checkbox" /> | ||
| Label 1 | ||
| </label> | ||
| <label className="flex items-center gap-x-1.5"> | ||
| <input className="w-4 h-4" type="checkbox" /> | ||
| Label 2 | ||
| </label> | ||
| <label className="flex items-center gap-x-1.5"> | ||
| <input className="w-4 h-4" type="checkbox" /> | ||
| Label 3 | ||
| </label> | ||
| <label className="flex items-center gap-x-1.5"> | ||
| <input className="w-4 h-4" type="checkbox" /> | ||
| Label 4 | ||
| </label> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="flex items-start gap-x-4"> | ||
| <div className="flex-shrink-0 w-20">Date</div> | ||
| <div className="flex-1"> | ||
| <div className="flex gap-x-2"> | ||
| <input className="flex-1 w-0 px-2 py-1 border border-darkgray outline-none" /> | ||
| ~ | ||
| <input className="flex-1 w-0 px-2 py-1 border border-darkgray outline-none" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="flex items-start gap-x-4"> | ||
| <div className="flex-shrink-0 w-20">TextArea</div> | ||
| <div className="flex-1"> | ||
| <textarea | ||
| className="block w-full px-2 py-1 border border-darkgray outline-none resize-none" | ||
| rows={3} | ||
| ></textarea> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="mt-2 text-right"> | ||
| <button className="px-2 py-1 bg-crimson rounded text-semiwhite">Search</button> | ||
| </div> | ||
| </form> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| 'use client'; | ||
|
|
||
| import { viewState } from '@/lib/atoms'; | ||
| import { insertCommas } from '@/lib/commons'; | ||
| import clsx from 'clsx'; | ||
| import { useRecoilValue } from 'recoil'; | ||
|
|
||
| export default function ListTable() { | ||
| const view = useRecoilValue(viewState); | ||
| const countPerPage = 10; | ||
| const totalCount = 30924; | ||
| const pages = [1, 2, 3, -1, 7, 8, 9]; | ||
| const currentPage = 2; | ||
|
|
||
| return ( | ||
| <> | ||
| <div className="overflow-x-auto no-scrollbar"> | ||
| <table className="w-full text-sm"> | ||
| <thead> | ||
| <tr className="border-b-2 border-charcoal/80 text-center whitespace-nowrap"> | ||
| <th className="p-2 text-left"> | ||
| ID<i className="ml-2 text-semigray fa-solid fa-sort"></i> | ||
| </th> | ||
| <th className="p-2 text-left"> | ||
| Type<i className="ml-2 text-semigray fa-solid fa-sort"></i> | ||
| </th> | ||
| <th className="p-2 text-left"> | ||
| Name<i className="ml-2 text-semigray fa-solid fa-sort"></i> | ||
| </th> | ||
| <th className="p-2 text-left"> | ||
| Ver<i className="ml-2 text-semigray fa-solid fa-sort"></i> | ||
| </th> | ||
| <th className="p-2 text-left"> | ||
| License(s)<i className="ml-2 text-semigray fa-solid fa-sort"></i> | ||
| </th> | ||
| <th className="p-2 text-left"> | ||
| Obligation(s)<i className="ml-2 text-semigray fa-solid fa-sort"></i> | ||
| </th> | ||
| <th className="p-2 text-left"> | ||
| Download<i className="ml-2 text-semigray fa-solid fa-sort"></i> | ||
| </th> | ||
| <th className="p-2 text-left"> | ||
| Vuln<i className="ml-2 text-semigray fa-solid fa-sort"></i> | ||
| </th> | ||
| <th className="w-8 p-2"> | ||
| <i className="fa-solid fa-eye"></i> | ||
| </th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| {Array.from(Array(10)).map((_, idx) => ( | ||
| <tr key={idx} className="border-b border-semigray"> | ||
| <td className="px-2 py-1.5">Data</td> | ||
| <td className="px-2 py-1.5">Data</td> | ||
| <td className="px-2 py-1.5">Data</td> | ||
| <td className="px-2 py-1.5">Data</td> | ||
| <td className="px-2 py-1.5">Data</td> | ||
| <td className="px-2 py-1.5">Data</td> | ||
| <td className="px-2 py-1.5">Data</td> | ||
| <td className="px-2 py-1.5">Data</td> | ||
| <td></td> | ||
| </tr> | ||
| ))} | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| {view !== 'none' && ( | ||
| <div | ||
| className={clsx( | ||
| 'flex mt-4 items-center', | ||
| view === 'pc' ? 'justify-between' : 'flex-col-reverse gap-y-4' | ||
| )} | ||
| > | ||
| <div className="text-darkgray"> | ||
| {countPerPage} entries (total {insertCommas(totalCount)} entries) | ||
| </div> | ||
| <div className="flex items-center gap-x-2"> | ||
| {pages.map((page) => { | ||
| if (page === -1) { | ||
| return <i key={page} className="fa-solid fa-ellipsis"></i>; | ||
| } | ||
|
|
||
| return ( | ||
| <button | ||
| key={page} | ||
| className={clsx( | ||
| 'px-2 py-0.5 border', | ||
| page === currentPage | ||
| ? 'bg-charcoal border-charcoal text-semiwhite' | ||
| : 'border-darkgray' | ||
| )} | ||
| > | ||
| {page} | ||
| </button> | ||
| ); | ||
| })} | ||
| </div> | ||
| </div> | ||
| )} | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| export function insertCommas(number: number) { | ||
| return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters