xevion/rdap
1
0
Fork 0
mirror of https://github.com/Xevion/rdap.git synced 2025-12-08 06:08:05 -06:00
Code Issues Packages Projects Releases Wiki Activity

AbstractCard for universal card styling, use AbstractCard & PropertyList for DomainCard

Browse Source
This commit is contained in:
Xevion
2023-05-23 22:54:57 -05:00
parent dc1ad36cc9
commit 3b20643892
2 changed files with 57 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/common/AbstractCard.tsx Normal file
View File

@@ -0,0 +1,27 @@
import React, { FunctionComponent, ReactNode } from "react";
type AbstractCardProps = {
children: ReactNode;
header?: ReactNode;
footer?: ReactNode;
};
const AbstractCard: FunctionComponent<AbstractCardProps> = ({
children,
header,
footer,
}) => {
return (
<div className="mb-4 overflow-clip rounded bg-zinc-800 shadow">
{header != null ? (
<div className="space-x-2 bg-zinc-700 p-2 pl-5">{header}</div>
) : null}
<div className="p-2 px-4">{children}</div>
{footer != null ? (
<div className="space-x-2 bg-zinc-700 p-2 pl-5">{footer}</div>
) : null}
</div>
);
};
export default AbstractCard;

59
src/components/lookup/DomainCard.tsx
View File

@@ -4,6 +4,8 @@ import { rdapStatusInfo } from "@/constants";
import type { Domain } from "@/types"; import type { Domain } from "@/types";
import Events from "@/components/lookup/Events"; import Events from "@/components/lookup/Events";
import Property from "@/components/common/Property"; import Property from "@/components/common/Property";
import PropertyList from "@/components/common/PropertyList";
import AbstractCard from "@/components/common/AbstractCard";
export type DomainProps = { export type DomainProps = {
data: Domain; data: Domain;
@@ -11,35 +13,34 @@ export type DomainProps = {
const DomainCard: FunctionComponent<DomainProps> = ({ data }: DomainProps) => { const DomainCard: FunctionComponent<DomainProps> = ({ data }: DomainProps) => {
return ( return (
<div className="mb-4 overflow-clip rounded bg-zinc-800"> <AbstractCard
<div className="bg-zinc-700 p-2 pl-5"> header={
<span className="font-mono">{data.ldhName ?? data.unicodeName}</span> ( <>
{data.handle}) <span className="font-mono">{data.ldhName ?? data.unicodeName}</span>
</div> <span>({data.handle})</span>
<div className="p-2 px-4"> </>
<dl> }
{data.unicodeName != undefined ? ( >
<Property title="Unicode Name">{data.unicodeName}</Property> <dl>
) : null} {data.unicodeName != undefined ? (
<Property title={data.unicodeName != undefined ? "LHD Name" : "Name"}> <Property title="Unicode Name">{data.unicodeName}</Property>
{data.ldhName} ) : null}
</Property> <Property title={data.unicodeName != undefined ? "LHD Name" : "Name"}>
<Property title="Handle">{data.handle}</Property> {data.ldhName}
<Property title="Events"> </Property>
<Events key={0} data={data.events} /> <Property title="Handle">{data.handle}</Property>
</Property> <Property title="Events">
<Property title="Status"> <Events key={0} data={data.events} />
<ul key={2} className="list-disc"> </Property>
{data.status.map((statusKey, index) => ( <PropertyList title="Status">
<li key={index}> {data.status.map((statusKey, index) => (
<span title={rdapStatusInfo[statusKey]}>{statusKey}</span> <PropertyList.Item key={index} title={rdapStatusInfo[statusKey]}>
</li> {statusKey}
))} </PropertyList.Item>
</ul> ))}
</Property> </PropertyList>
</dl> </dl>
</div> </AbstractCard>
</div>
); );
}; };