fix: differences from export and some tailwind css classname order rearrangement
This commit is contained in:
marcelines
parent
0920018ac5
commit
a93d4b927a
|
|
@ -1,4 +1,4 @@
|
|||
export { Breadcrumbs } from './breadcrumbs/breadcrumbs'
|
||||
export { EpicOverview } from './epic-overview'
|
||||
export { SideBar } from './side-bar/side-bar'
|
||||
export { TableIssues } from './table-issues'
|
||||
export { TableIssues } from './table-issues/table-issues'
|
||||
|
|
|
|||
|
|
@ -1,85 +0,0 @@
|
|||
import { Avatar, Button, Tag, Text } from '@status-im/components'
|
||||
import Link from 'next/link'
|
||||
|
||||
const issues = [
|
||||
{
|
||||
id: 5154,
|
||||
title: 'Add support for encrypted communities',
|
||||
status: 'Open',
|
||||
},
|
||||
{
|
||||
id: 5155,
|
||||
title: 'Add support for encrypted communities',
|
||||
status: 'Open',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Add support for encrypted communities',
|
||||
status: 'Open',
|
||||
},
|
||||
{
|
||||
id: 4324,
|
||||
title: 'Add support for encrypted communities',
|
||||
status: 'Open',
|
||||
},
|
||||
{
|
||||
id: 876,
|
||||
title: 'Add support for encrypted communities',
|
||||
status: 'Open',
|
||||
},
|
||||
]
|
||||
|
||||
export const TableIssues = () => {
|
||||
return (
|
||||
<div className="overflow-hidden rounded-2xl border border-neutral-10">
|
||||
<div className="border-b border-neutral-10 bg-neutral-5 p-3">
|
||||
<Text size={15} weight="medium">
|
||||
784 Open
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<div className="divide-y divide-neutral-10">
|
||||
{issues.map(issue => (
|
||||
<Link
|
||||
key={issue.id}
|
||||
href={`https://github.com/status-im/status-react/issues/${issue.id}`}
|
||||
className="flex items-center justify-between px-4 py-3 transition-colors duration-200 hover:bg-neutral-5"
|
||||
>
|
||||
<div className="flex flex-col">
|
||||
<Text size={15} weight="medium">
|
||||
{issue.title}
|
||||
</Text>
|
||||
<Text size={13} color="$neutral-50">
|
||||
#9667 • Opened 2 days ago by slaedjenic
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<div className="flex gap-1">
|
||||
<Tag size={24} label="E:Syncing" color="$orange-50" />
|
||||
<Tag size={24} label="E:Wallet" color="$green-50" />
|
||||
<Tag size={24} label="Feature" color="$pink-50" />
|
||||
<Tag size={24} label="Web" color="$purple-50" />
|
||||
</div>
|
||||
|
||||
<Tag size={24} label="9435" />
|
||||
|
||||
<Avatar
|
||||
type="user"
|
||||
size={24}
|
||||
name="jkbktl"
|
||||
src="https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1299&q=80"
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="p-3">
|
||||
<Button size={40} variant="outline">
|
||||
Show more 10
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@ import { cloneElement, useState } from 'react'
|
|||
import { Avatar, Button, Input, Text } from '@status-im/components'
|
||||
import { DropdownMenu } from '@status-im/components/src/dropdown-menu'
|
||||
import { DropdownIcon, SearchIcon } from '@status-im/icons'
|
||||
import Image from 'next/image'
|
||||
|
||||
import { useCurrentBreakpoint } from '@/hooks/use-current-breakpoint'
|
||||
|
||||
|
|
@ -110,7 +111,7 @@ const DropdownFilter = (props: Props) => {
|
|||
})}
|
||||
{filteredData.length === 0 && (
|
||||
<div className="flex flex-col items-center justify-center p-2 py-1">
|
||||
<img
|
||||
<Image
|
||||
className="pb-3 invert"
|
||||
alt="No results"
|
||||
src={'/assets/filters/empty.png'}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { useState } from 'react'
|
|||
import { IconButton, Text } from '@status-im/components'
|
||||
import { DropdownMenu } from '@status-im/components/src/dropdown-menu'
|
||||
import { SortIcon } from '@status-im/icons'
|
||||
import Image from 'next/image'
|
||||
|
||||
type Data = {
|
||||
id: number
|
||||
|
|
@ -44,7 +45,7 @@ const DropdownSort = (props: Props) => {
|
|||
})}
|
||||
{data.length === 0 && (
|
||||
<div className="flex flex-col items-center justify-center p-2 py-1">
|
||||
<img
|
||||
<Image
|
||||
className="pb-3 invert"
|
||||
alt="No results"
|
||||
src={'/assets/filters/empty.png'}
|
||||
|
|
|
|||
|
|
@ -219,8 +219,8 @@ const TableIssues = () => {
|
|||
const currentBreakpoint = useCurrentBreakpoint()
|
||||
|
||||
return (
|
||||
<div className="border-neutral-10 overflow-hidden rounded-2xl border">
|
||||
<div className="bg-neutral-5 border-neutral-10 flex border-b p-3">
|
||||
<div className="overflow-hidden rounded-2xl border border-neutral-10">
|
||||
<div className="flex border-b border-neutral-10 bg-neutral-5 p-3">
|
||||
<div className="flex w-full flex-col 2xl:flex-row 2xl:justify-between">
|
||||
<Tabs />
|
||||
<div className="flex-1">
|
||||
|
|
@ -275,12 +275,12 @@ const TableIssues = () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="divide-neutral-10 divide-y">
|
||||
<div className="divide-y divide-neutral-10">
|
||||
{issues.map(issue => (
|
||||
<Link
|
||||
key={issue.id}
|
||||
href={`https://github.com/status-im/status-react/issues/${issue.id}`}
|
||||
className="hover:bg-neutral-5 flex items-center justify-between px-4 py-3 transition-colors duration-200"
|
||||
className="flex items-center justify-between px-4 py-3 transition-colors duration-200 hover:bg-neutral-5"
|
||||
>
|
||||
<div className="flex flex-col">
|
||||
<Text size={15} weight="medium">
|
||||
|
|
|
|||
Loading…
Reference in New Issue