xevion/rdap
1
0
Fork 0
mirror of https://github.com/Xevion/rdap.git synced 2025-12-06 01:16:00 -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 Events from "@/components/lookup/Events";
import Property from "@/components/common/Property";
import PropertyList from "@/components/common/PropertyList";
import AbstractCard from "@/components/common/AbstractCard";
export type DomainProps = {
data: Domain;
@@ -11,35 +13,34 @@ export type DomainProps = {
const DomainCard: FunctionComponent<DomainProps> = ({ data }: DomainProps) => {
return (
<div className="mb-4 overflow-clip rounded bg-zinc-800">
<div className="bg-zinc-700 p-2 pl-5">
<span className="font-mono">{data.ldhName ?? data.unicodeName}</span> (
{data.handle})
</div>
<div className="p-2 px-4">
<dl>
{data.unicodeName != undefined ? (
<Property title="Unicode Name">{data.unicodeName}</Property>
) : null}
<Property title={data.unicodeName != undefined ? "LHD Name" : "Name"}>
{data.ldhName}
</Property>
<Property title="Handle">{data.handle}</Property>
<Property title="Events">
<Events key={0} data={data.events} />
</Property>
<Property title="Status">
<ul key={2} className="list-disc">
{data.status.map((statusKey, index) => (
<li key={index}>
<span title={rdapStatusInfo[statusKey]}>{statusKey}</span>
</li>
))}
</ul>
</Property>
</dl>
</div>
</div>
<AbstractCard
header={
<>
<span className="font-mono">{data.ldhName ?? data.unicodeName}</span>
<span>({data.handle})</span>
</>
}
>
<dl>
{data.unicodeName != undefined ? (
<Property title="Unicode Name">{data.unicodeName}</Property>
) : null}
<Property title={data.unicodeName != undefined ? "LHD Name" : "Name"}>
{data.ldhName}
</Property>
<Property title="Handle">{data.handle}</Property>
<Property title="Events">
<Events key={0} data={data.events} />
</Property>
<PropertyList title="Status">
{data.status.map((statusKey, index) => (
<PropertyList.Item key={index} title={rdapStatusInfo[statusKey]}>
{statusKey}
</PropertyList.Item>
))}
</PropertyList>
</dl>
</AbstractCard>
);
};