opensource/sqlchat
1
0
Fork 0
mirror of https://github.com/sqlchat/sqlchat.git synced 2025-09-23 10:33:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: update setting page style

Browse Source
This commit is contained in:
Steven
2023-05-18 23:30:05 +08:00
parent 570e40a4d1
commit d75da665e1
3 changed files with 18 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/SettingView.tsx
View File

@ -17,7 +17,7 @@ const SettingView = () => {
const { data: session } = useSession();
return (
<div className="w-full flex flex-col justify-start items-start space-y-3 pt-4 dark:bg-zinc-800">
<div className="w-full flex flex-col justify-start items-start space-y-3 py-4 sm:py-8 dark:bg-zinc-800">
<div className="w-full flex flex-row justify-start items-start flex-wrap gap-2">
<a
href="https://discord.gg/z6kakemDjm"

16
src/components/StripeCheckPaymentBanner.tsx
View File

@ -1,9 +1,8 @@
import useSWR from "swr";
import { useTranslation } from "react-i18next";
import { useRouter } from "next/router";
import { useState } from "react";
import { fetchGetJSON } from "../utils/api-helpers";
import useSWR from "swr";
import Link from "next/link";
import Icon from "./Icon";
interface Props {
@ -20,10 +19,7 @@ const StripeCheckPaymentBanner = (props: Props) => {
// Fetch CheckoutSession from static page via
// https://nextjs.org/docs/basic-features/data-fetching#static-generation
const { data, error } = useSWR(
router.query.session_id ? `/api/checkout_sessions/${sessionId}` : null,
fetchGetJSON
);
const { data } = useSWR(router.query.session_id ? `/api/checkout_sessions/${sessionId}` : null, fetchGetJSON);
return (
<>
@ -33,13 +29,9 @@ const StripeCheckPaymentBanner = (props: Props) => {
} relative w-full flex flex-row justify-start sm:justify-center items-center py-1 bg-gray-100 dark:bg-zinc-700`}
>
<div className="text-sm leading-6 pr-4 cursor-pointer">
{t("payment.self")}{" "}
{data?.payment_intent?.status ?? t("common.loading")}
{t("payment.self")} {data?.payment_intent?.status ?? t("common.loading")}
</div>
<button
className="absolute right-2 sm:right-4 opacity-60 hover:opacity-100"
onClick={() => setHideBanner(true)}
>
<button className="absolute right-2 sm:right-4 opacity-60 hover:opacity-100" onClick={() => setHideBanner(true)}>
<Icon.BiX className="w-6 h-auto" />
</button>
</div>

42
src/components/SubscriptionHistoryTable.tsx
View File

@ -1,9 +1,9 @@
import { useEffect, useState } from "react";
import axios from "axios";
import { t } from "i18next";
import { useSession } from "next-auth/react";
import { useEffect, useState } from "react";
import { SubscriptionPurchase } from "@/types";
import { getCurrencySymbol, getDateString } from "@/utils";
import { t } from "i18next";
const SubscriptionHistoryTable = () => {
const [list, setList] = useState<SubscriptionPurchase[]>([]);
@ -28,6 +28,10 @@ const SubscriptionHistoryTable = () => {
}
}, [session]);
if (list.length === 0) {
return <></>;
}
return (
<div className="px-4 sm:px-6 lg:px-8">
<div className="mt-8 flow-root">
@ -36,28 +40,16 @@ const SubscriptionHistoryTable = () => {
<table className="min-w-full divide-y divide-gray-300">
<thead>
<tr>
<th
scope="col"
className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0"
>
<th scope="col" className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0">
{t("common.date")}
</th>
<th
scope="col"
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
>
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
{t("common.description")}
</th>
<th
scope="col"
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
>
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
{t("common.amount")}
</th>
<th
scope="col"
className="relative py-3.5 pl-3 pr-4 sm:pr-0"
></th>
<th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-0"></th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200">
@ -66,21 +58,13 @@ const SubscriptionHistoryTable = () => {
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">
{getDateString(subscription.createdAt)}
</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{subscription.description}</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
{subscription.description}
</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
{getCurrencySymbol(
subscription.currency.toLocaleUpperCase()
)}
{getCurrencySymbol(subscription.currency.toLocaleUpperCase())}
{subscription.amount / 100}
</td>
<td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-0">
<a
href={subscription.receipt}
target="_blank"
className="text-indigo-600 hover:text-indigo-900"
>
<a href={subscription.receipt} target="_blank" className="text-indigo-600 hover:text-indigo-900">
{t("setting.billing.view-receipt")}
</a>
</td>